安装flexible
npm install lib-flexible --save
引入flexible
在项目入口文件main.js中添加如下代码,引入flexible
import 'lib-flexible'
px 转 rem
使用 webpack 的 px2rem-loader,自动将px转换为rem
安装px2rem-loader
npm install px2rem-loader --save-dev
配置px2rem
build/utils.js中:
增加红色部分
其他
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 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");
}
}