pxtorem的适配

一般都使用`pxtorem`,源代码用的是px单位进行布局,但是运行起来以后,使用rem进行解析。

启动项目用的是webpack或vite,所以这个插件是运行在打包工具中 ==> 就是给webpack或vite做配置。

默认使用react脚手架创建的项目,是没有webpack的配置文件,需要执行命令,创建配置文件:

 npm run eject

命令运行完成后,会创建一个config文件夹,其中就包含webpack的配置文件`webpack.config.js`,就可以对webpack做配置了 

适配方案1: 

 1. 下载插件

 npm i postcss-px-to-viewport

 2.在webpack的配置文件中进行配置

 

 适配方案2: 

  1. 下载插件

 npm i postcss-pxtorem amfe-flexible

2. 对webpack做配置

3.在入口文件中导入另一个插件

 

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
postcss-pxtorem是一个PostCSS插件,用于将素单位(px)转换为rem单位,以实现移动端适配。它可以帮助开发者根据设计稿的尺寸自动将像素单位转换为rem单位,并且可以根据不同的屏幕尺寸进行适配。 使用postcss-pxtorem适配平板的步骤如下: 1. 首先,安装postcss-pxtorem插件。可以使用npm或者yarn进行安装: ``` npm install postcss-pxtorem --save-dev ``` 或者 ``` yarn add postcss-pxtorem --dev ``` 2. 在项目的根目录下创建一个postcss.config.js文件,并配置postcss-pxtorem插件。示例配置如下: ```javascript module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 16, // 设计稿宽度除以10,例如设计稿宽度为375px,则rootValue为37.5 propList: ['*'], // 需要转换的属性,这里设置为全部 selectorBlackList: [], // 需要忽略的选择器,可以使用正则表达式 }, }, }; ``` 3. 在项目的构建工具中配置使用postcss-pxtorem插件。具体配置方式根据不同的构建工具而定,例如在webpack中的配置如下: ```javascript module.exports = { // ... module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: { config: 'postcss.config.js', }, }, }, ], }, ], }, // ... }; ``` 4. 在项目中使用rem单位进行样式编写。postcss-pxtorem插件会自动将像素单位转换为rem单位,根据不同的屏幕尺寸进行适配。 这样,使用postcss-pxtorem插件后,可以方便地进行平板适配,使得页面在不同的屏幕尺寸下显示一致。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值