首先装包
npm i lib-flexible --save
npm i px2rem-loader --save
装完之后修改一下flexible.js的一个地方(因为依赖中当屏幕宽度大于540后,width固定写死了)
改完之后的代码
function refreshRem(){
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = width * dpr;
}
var rem = width / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
然后在main.js引入flexible
import 'lib-flexible'
最后修改build下的utils.js文件配置
在cssLoaders函数里添加px2remLoader
(代码方便copy)
// 配置px2rem-loader
const px2remLoader = {
loader: 'px2rem-loader',
options: {
// 根据你的设计稿而定,remUnit = 设计稿 / 10;
// 比如750px的设计稿,remUnit = 1920 / 10 = 192;
remUnit: 192
}
}
然后在generateLoaders里面添加px2remLoader
(同样方便copy)
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
验证一下,写两个div
<template>
<div>
<div class="div1"></div>
<div class="div2"></div>
</div>
</template>
<script>
export default {
}
</script>
<style>
.div1{
width: 1920px;
height: 192px;
background-color: red;
}
.div2{
width: 960px;
height: 192px;
background-color: blue;
}
</style>
代码里写的是px,但页面上显示已经是rem了
OK,成功!