移动端自适应px单位转换rem

388 阅读1分钟

首先移动端单位转换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;
    }
    ...

改完后重启一下项目,就可以了

记录一下,以免后面忘记