正文
关于vue中使用rem问题
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1.下载lib-flexible
我使用的是vue-cli+webpack，所以是通过npm来安装的
npm i lib-flexible --save
2.引入lib-flexible
在main.js中引入lib-flexible
import 'lib-flexible/flexible'
3.安装px2rem-loader
npm install px2rem-loader
4.配置px2rem-loader
npm install px2rem-loader
在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，将下面代码加进cssLoaders方法中
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUint: 75
}
}
同时，在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader, px2remLoader]
if (options.usePostCSS) {
loaders.push(postcssLoader)
}
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
5、重启
当配置完之后，重启下服务，px会自动转化为rem了
npm run dev
6、注意事项
1、不能在index.html的头部加 name 为 viewport 的 meta 标签，flexible会自动为我们添加！
2、对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;
}
3、对边框样式增加/* no */后缀，会保持原样
.box{
border: 1px solid #fff; /* no */
}
// 会被编译成如下：
.box{
border: 1px solid #fff;
}
