移动端项目可以用postcss-pxtorem插件将px转换为rem单位
1. npm i postcss-pxtorem -D // 安装
2. 修改配置文件 postcss.config.js
module.exports = {
plugins: {
‘autoprefixer‘: {
browsers: [‘Android >= 4.0‘, ‘iOS >= 7‘]
},
‘postcss-pxtorem‘: {
rootValue: 16,//结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
propList: [‘*‘]
}
}
}
3. main.js 添加对根元素字体的大小设置，来达到适配多倍图的效果
function setRem() {
// 320 默认大小16px; 320px = 20rem ;每个元素px基础上/16
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
// 得到html的Dom元素
const htmlDom = document.getElementsByTagName(‘html‘)[0]
// 设置根元素字体大小
htmlDom.style.fontSize = (htmlWidth / 20) + ‘px‘
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function() {
setRem()
}