移动端适配 px换算rem插件 postcss-plugin-px2rem

Posted 2021-07-07 哈娄

目录

1. 配置教程

2.需求效果：设计稿750尺寸 给的宽度是100px，在iphone6上其实是50px展示。

3. 样式绕过转换 (内联写法不会被转换)

---

 

1.  postcss-plugin-px2rem插件可以帮助我们在做移动端的时候直接 写设计稿的px，插件帮助编译，输出rem
2. 换算顺序关系:  css写的px  /  rootValue  *  根节点的px = 最终展示的px值

• (可根据公式 自己调整设定的像素值，来方便编写样式)
• (如果想按照设计稿的像素大小直接写，需要保证 rootValue /  根节点的px = 2 即可)

1. 配置教程

第一步：postcss-plugin-px2rem 引入使用(vue例子)

cnpm install postcss-plugin-px2rem --save

第二步：

创建vue.config.js文件

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-plugin-px2rem')({
            rootValue: 100, //px换算rem基数，100也就是 100px换算成1rem
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            // propBlackList: [], //黑名单
            exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            // selectorBlackList: [], //要忽略并保留为px的选择器
            // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
            mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
            minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
          }),
        ],
      },
    },
  },
};

第三步：

在.html文件设置 , 宽度按照iphone6屏幕尺寸  设置根节点的font-size 

<script>
      let width = document.documentElement.clientWidth;
      let fontSize = width / 7.5 // 375/7.5 = 50. 
      document.documentElement.style.fontSize = fontSize + 'px'
      //  赋值之后，1rem 相当于50px
</script>

2.需求效果：设计稿750尺寸 给的宽度是100px，在iphone6上其实是50px展示。

我们经过上面的换算之后，在vue的样式内直接写设计稿的尺寸即可

h1 {
  height: 100px;
  width: 100px;
}
// 转译后,在浏览器中样式区会是
h1 {
  height: 1rem;
  width: 1rem;
}
// 因为rootValue中写的100，所以100px会被转换成1rem

由于根节点设置了1rem = 50px; 最终页面展示为宽高都为 50px的盒子。与需求效果一致。

 

3. 样式绕过转换 (内联写法不会被转换)

不想被转换的 可以 以大写的PX 来绕过插件的编译 如： 

h1 {
    width: 100PX;
    height: 100PX;
}