先介绍用到的两个工具:
px2rem-loader
:将css中的px转为rem单位,用了它就不用自己计算rem值了
lib-flexible
:根据设备宽度,修改根元素html的font-size,以适配不同终端
配置
- 安装1:
npm i px2rem-loader --save -dev
- 安装2:
npm i lib-flexible --save
- 配置:
build/utils.js
中:
// exports.cssLoaders内增加:
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 // 设计稿宽度/10
}
}
// function generateLoaders前增加:
...
function generateSassResourceLoader() {
var loaders = [
cssLoader,
postcssLoader,
px2remLoader,
// 'sass-loader',
// {
// loader: 'sass-resources-loader',
// options: {
// resources: [
// path.resolve(__dirname, '../src/common/scss/variable.scss'),
// path.resolve(__dirname, '../src/common/scss/mixin.scss')
// ]
// }
// }
]
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
...
// return中改为:
...
// sass: generateSassResourceLoader(),
// scss: generateSassResourceLoader(),
css: generateSassResourceLoader(),
...
注意事项
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");
}
}