vue flexible px2rem

参考https://blog.csdn.net/qq_31393401/article/details/80765909

安装lib-flexible

npm i lib-flexible --save

安装px2rem

npm i px2rem-loader --save -dev

引入flexible

入口文件main.js中引入：

import 'lib-flexible/flexible.js'

配置px2rem

build/utils.js中：
增加红色部分

image.png

其他

1.对css中文字样式增加/* px */后缀，会编译出适应不同dpr的字号：

.text{
    font-size: 28px; /* px */
}
// 会被编译成如下：

    [data-dpr="1"] .text { // data-dpr是由flexible计算出来并加在html上的设备像素比
        font-size: 14px;
    }

    [data-dpr="2"] .text {
        font-size: 28px;
    }

    [data-dpr="3"] .text {
        font-size: 42px;
    }

2. 对边框样式增加/* no */后缀，会保持原样:

.box{
    border: 1px solid #fff; /* no */
}
// 会被编译成如下：
.box{
    border: 1px solid #fff;
}

3. 对不同dpr选择不同的图片
   mixin.scss中：

// 背景图片
@mixin bg-image($url) {
    background-image: url($url + "@2x.png");
    @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
        background-image: url($url + "@3x.png");
    }
}