移动端css样式长度单位rem
建议配置 postcss-pxtorem 和 postcss-px2rem-exclude (排除目录) 和 lib-flexible (设置根字体大小),
以下函数的效果与 lib-flexible 类同, css中使用rem单位;
// 设置 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()
}
如果是vue项目, 则使用postcss批量转换px至rem, 即CSS中只要写px单位即可