vue 移动端rem与px的全局配置

一般手机端的设计稿都是以750px为基准来做的，前端开发拿到设计稿开始写页面需要考虑各个型号的机型的适配。如果你使用uniapp来做移动端的页面，你可以直接以750px为基准来画页面，uniapp已经处理好了坐标转换，下面的文章内容仅作了解。
但是普通的vue-cli生成的工程并没有处理坐标转换，你按照750px的设计稿写出来的页面在很多手机上跑起来会变形。
当然了，为了适配不同的机型你可以用flex布局或者百分比，但是算来算去不烦吗，我就想在css样式里面按照设计稿的宽高写页面还能适配所有机型，这样多舒服。

rem

rem是CSS3新增的一个相对单位rem（root em，根em。
rem是相对于根节点或者是html节点。
举个例子：
如果手机屏幕宽度是750px,根节点设置了font-size:100px，那么手机屏幕宽度就是7.5rem（750/100）。
rem布局不多赘述，有很多详细说明rem布局原理的资料。

本文的核心就是，通过JS获取设备宽度动态设定rem值，以实现在不同宽度的页面中使用rem作为单位的元素自适应的效果。

直接上代码吧：

新建rem.js文件，在main.js中引用

(function(window, document) {
    function resize() {
        var ww = window.innerWidth;
        //设计稿以750为宽度，我们把页面宽度设计为 7.5rem
        //baseSize就是postcss.config.js 里面设置的 rootValue 值，这个是设计稿中1rem转换成px的大小
        const baseSize = 100;
        //实际设备页面宽度和设计稿的比值
        const scale = ww / 750;
        //计算实际的rem值并赋予给html的font-size
        document.documentElement.style.fontSize = (baseSize * scale) + 'px';
    }
    if (document.readyState !== 'loading') {
        resize();
    } else {
        document.addEventListener('DOMContentLoaded', resize);
    }
    window.addEventListener('resize', resize);
})(window, document);

postcss-pxtorem

postcss-pxtorem是PostCSS的插件，用于将像素单元生成rem单位。

安装 postcss-pxtorem

npm install postcss-pxtorem --save-dev

这样安装可能会有问题
npm WARN postcss-pxtorem@6.0.0 requires a peer of postcss@^8.0.0 but none is installed. You must install peer dependencies yourself.
网上的说法是postcss-pxtorem版本过高。
所以建议直接在package.json文件的devDependencies指定版本

 postcss-pxtorem": "^5.1.1

配置示例，三种方式：
vue.config.js

module.exports = {
  //...其他配置
  css: {
   loaderOptions: {
    postcss: {
     plugins: [
      require('postcss-pxtorem')({
       rootValue: 100,
       minPixelValue: 2,
       propList: ['*'],
      })
     ]
    }
   }
  },
 }

.postcssrx.js

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 100,
      minPixelValue: 2,
      propList: ['*'],
    }
  }
}

postcss.config.js （建议用这种方式）

module.exports = {
 plugins: {
  'postcss-pxtorem': {
   rootValue: 100,
   minPixelValue: 2,
   propList: ['*'],
  }
 }
}

以上配置的属性中最重要的是这个:
rootValue (Number)
根元素的值，即1rem的相对应的px值
比如 rootValue = 100时，在css中width:300px; 最终会换算成width:3rem;
还有一些其他的配置：

propList (Array) 需要做单位转化的属性
必须精确匹配

• 用 * 来选择所有属性. Example: ['*']
• 在句首和句尾使用 * (['position'] 会匹配 background-position-y)
• 使用 ! 来配置不匹配的属性. Example: ['*', '!letter-spacing']
• 组合使用. Example: ['', '!font']

minPixelValue(Number) 可以被替换的最小像素
unitPrecision(Number) rem单位的小数位数上限

github: 代码
网盘： 代码 密码: nb4k