执行命令 安装插件postcss-pxtorem
npm install postcss-pxtorem -D
postcss.config.js 新建package.json同一个目录下，文件内容如下
module.exports = {
plugins: {
‘autoprefixer’: {
browsers: [‘Android >= 4.0’, ‘iOS >= 7’]
},
‘postcss-pxtorem’: {
rootValue: 16,//结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
propList: [’*’]
}
}
}
新建libs文件夹并且创建rem.js文件
// 设置 rem 函数
function setRem() {
// 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
let htmlDom = document.getElementsByTagName(‘html’)[0];
//设置根元素字体大小
htmlDom.style.fontSize = htmlWidth / 20 + ‘px’;
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {
setRem()
}
main.js文件添加如下
import ‘…/libs/rem.js’;