单位适配 px转换rem

1.下载amfe-flexible

根据网页宽度, 设置html的font-size

npm i amfe-flexible -S

2. 到main.js引入

import "amfe-flexible"

3. 下载   postcss  和   postcss-pxtorem

postcss: 后处理css, 编译翻译css代码

postcss-pxtorem: 把css代码里所有px计算转换成rem

npm i postcss -S
npm i postcss-pxtorem -S

 4. 根目录下创建postcss.config.js文件

module.exports = {
    plugins: {
        'postcss-pxtorem': { // 把px单位换算成rem单位
            rootValue: 37.5, //换算基数， 
            unitPrecision: 20, //允许REM单位增长到的十进制数字,小数点后保留的位数。
            propList: ['*'],
            selectorBlackList: [], //要忽略并保留为px的选择器，本项目我是用的vant ui框架，所以忽略他
            minPixelValue: 1 //设置要替换的最小像素值
        }
    }
}

小结 

1. 移动端适配选择哪种?

   rem + flexible.js

2. flexible.js作用是什么?

   js代码里获取网页宽度 / 10设置html的font-size的值(px单位)

3. 代码里px如何自动转换rem?

   postcss 和 postcss-pxtorem插件

端设计图宽度375px, 而flexible.js会/10, 设置html的font-size为37.5