Vue-cli3将px转换成rem单位配置(flexible,px2rem)

2019-02-20

vue-cli3配置flexible,px2rem将px转换成rem

vue-cli2配置参考
https://blog.csdn.net/mrzhangxianshengjs/article/details/84562547
配置

1、安装插件

1 2	npm install --save lib-flexible npm install --save-dev postcss-loader postcss-px2rem

2、main.js引入flexible插件：
1
import 'lib-flexible/flexible.js'

3 在项目public目录的index.html头部加入手机端适配的meta的代码

1 2	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">

4 在根目录下创建配制文件vue.config.js，并配制如下信息

//动态处理px成rem插件
loaderOptions: {
    css: {
        // options here will be passed to css-loader
    },
    postcss: {
        // options here will be passed to postcss-loader
        plugins: [require('postcss-px2rem')({
        //设计图的宽度/10 比如你的设计图是1920的宽度 这里你就1920/10=192
            remUnit: 160,
            remPrecision: 8//换算的rem保留几位小数点
        })]
    }
}

修改lib-flexible的代码，因为默认的是移动端的配置会固定死540px,在pc端项目中会出问题

function refreshRem(){
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
    //屏幕宽度大于540限制死了 width = 540 * dpr
    //当屏幕宽度超过540的时候我们应该以实际宽度重新计算,从而来做到适应PC
        width = width * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}

5 对于有些地方不用将px转换编译成rem的话写法如下
1
font-size: 24px; /*no*/