vue移动端适配方案 - px 转 rem

在做移动端开发，我们希望px自动转成rem，有三种方法

1JS计算
就是自己手动去算，在app.vue中，通过JavaScript读取屏幕宽度，然后根据宽度计算出对应的尺寸并设置根元素的font-size。

const oHtml = document.getElementsByTagName('html')[0]
const width = oHtml.clientWidth;
// 320px的屏幕基准像素为12px
oHtml.style.fontSize = 12 * (width / 320) + "px";

2 媒体查询

@media screen and (min-width: 375px){
    html {
        font-size: 14.0625px;   
    }
}
@media screen and (min-width: 360px){
    html {
        font-size: 13.5px;
    }
}
@media screen and (min-width: 320px){
    html {
        font-size: 12px;
    }
}
html {
    font-size: 16px;
}

3使用lib-flexible插件

3.1.安装lib-flexible

yarn lib-flexible

3.2.引入lib-flexible

# src/main.ts

import 'lib-flexible/flexible'

3.3.安装postcss-pxtorem

yarn postcss-pxtorem

3.4.在根目录下新建 postcss.config.js

module.exports = {
    'plugins': {
      'autoprefixer': {
        overrideBrowserslist: [
          'Android 4.1',
          'iOS 7.1',
          'Chrome > 31',
          'not ie <= 11',  //不考虑IE浏览器
          'ff >= 30', //仅新版本用“ff>=30
          '> 1%',//  全球统计有超过1%的使用率使用“>1%”;
          'last 2 versions', // 所有主流浏览器最近2个版本
        ],
        grid: true ,// 开启grid布局的兼容(浏览器IE除外其他都能兼容grid，可以关闭开启)
      },
      'postcss-pxtorem': {
        rootValue: 75, //75表示750设计稿，37.5表示375设计稿
        unitPrecision: 6, // 计算结果保留 6 位小数
        selectorBlackList: ['.no-rem', 'no-rem'], // 要忽略的选择器并保留为px。
        propList: ['*'], // 可以从px更改为rem的属性  感叹号开头的不转换
        replace: true, // 转换成 rem 以后，不保留原来的 px 单位属性
        mediaQuery: true, // 允许在媒体查询中转换px。
        minPixelValue: 2, // 设置要替换的最小像素值。
        exclude: /node_modules/i // 排除 node_modules 文件(node_modules 内文件禁止转换)
      }
    }
  } 

如果嫌麻烦的可以换成下面写法：

module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-pxtorem": {
      "rootValue": 75,
      "propList": ['*'],
    }
  }
}

重启项目即可
如果在运行项目中出现如下报错信息：

vue Syntax Error: Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.

检查package.jso中postcss-pxtorem的版本，如果是6.*则是版本过高不兼容问题，卸载重装5.1.1版本的即可。

yarn remove postcss-pxtorem
yarn add [email protected] 

lib-fiexible原理
lib-flexible: 根据不同的屏幕算出html的font-size，通过js来动态写meta标签。会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem

注意：
1.lib-flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。
2.检查一下html文件的head中，如果有 meta name="viewport"标签，需要将他注释掉，因为如果有这个标签的话，lib-flexible就会默认使用这个标签。而我们要使用lib-flexible自己生成的 meta name="viewport"来达到高清适配的效果。
3.因为html的font-size是根据屏幕宽度除以10计算出来的，所以我们需要设置页面的最大宽度是10rem。
4.如果每次从设计稿量出来的尺寸都手动去计算一下rem，就会导致我们效率比较慢，还有可能会计算错误，所以我们可以使用postcss-pxtorem或者postcss-px2rem-exclude自动将css中的px转成rem

postcss-pxtorem: 自动将项目中的 px 转为 rem

注意：
1.postcss-pxtorem会将px转换为rem用于适配不同宽度的屏幕，根据标签的font-size值来计算出结果，即1rem=html标签的font-size值。
2.对于行内样式，postcss-pxtorem并不能将px转rem，所以对于需要自适应的样式，如font-size、width、height等请不要写在行内。同理，对于不需要转化的样式可以写在行内，或者使用PX（大写）作为单位。
3.如果在.vue文件style中的某一行代码不希望被转成rem，只要在后面写上注释 /* no*/就可以了