vuelic脚手架适配移动端解决方法rem

目前在vue2 环境下进行

安装：

npm install amfe-flexible --save  //为html、body添加font-size，窗口调整时候重新设置font-size
npm install postcss-pxtorem@5.1.1 --save-dev  //将px转rem

1，在main.js入口文件引入

import 'amfe-flexible'

2，创建postcss.config.js配置文件

module.exports = {
    plugins: {
        autoprefixer: {},
        // flexible配置
        "postcss-pxtorem": {
            "rootValue": 75, //如果设计稿是750px
            "propList": ["*"], // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
            "exclude": /node_modules/i
        }
    }
}


//假设设计稿750宽;rootValue为75，说是对根元素大小进行设置.
rootValue: 75,
//unitPrecision为5,是转换成rem后保留的小数点位数.
unitPrecision: 5,
//propList是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']意思是排除带有border的属性.
propList: ['*'],
//selectorBlackList则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换这里也支持正则写法。
selectorBlackList: [],
replace: true,
mediaQuery: false,
//minPixelValue的选项，我设置了12，意思是所有小于12px的样式都不被转换
minPixelValue: 12

3,小技巧

比如像border这种我不愿意替换成rem的我该怎么解决？
我还是想使用px来表达的话，那么我们可以把1px写成 1Px 或 1PX来解决

也可参考：https://sdeno.com/?p=7364

https://www.jianshu.com/p/7acdb535fcd5

https://blog.csdn.net/a460550542/article/details/125084903