首先移动端单位转换px转rem用到的插件
npm install lib-flexible
npm install postcss-px2rem-exclude 和 vant样式发生冲突
或
npm install postcss-pxtorem-exclude
安装两个插件,第二个插件二选一,但是第二个插件的第一个和vant的样式会有冲突,所以我就换成了第二个
根目录下创建postcss.config.js文件
module.exports = {
plugins: {
// 两个配置对应两个插件 安装哪个插件写哪个配置
'postcss-px2rem-exclude': {
remUnit: 100, // 这是换算的比例,100px = 1rem
exclude: /node_modules|folder_name/i
},
'postcss-pxtorem': {
rootValue: 100,
}
}
};
修改依赖 lib-flexible / flexible 文件夹
... 大概66行
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width * dpr;
}
var rem = width / 3.75; // 设计图的百分之一
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
...
改完后重启一下项目,就可以了
记录一下,以免后面忘记