pxtorem完美适配PC端和移动端样式

1、安装依赖
npm install postcss-pxtorem -D
2、设置规则（更改postcss.config.js,该文件为使用vue-cli3自动创建的文件）

module.exports = {
plugins: {
‘autoprefixer’: {
browsers: [‘Android >= 4.0’, ‘iOS >= 7’]
},
‘postcss-pxtorem’: {
rootValue: 16,//结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
propList: [’*’]
}
}
}
3、src目录下，新建 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];
//设置根元素字体大小
let clientWidth = document.body.clientWidth
//1920设计稿一套样式，750设计稿一套样式
htmlDom.style.fontSize = clientWidth<900?htmlWidth/16 + ‘px’:htmlWidth/120 + ‘px’;
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
4、在main.js中引入rem.js
import ‘./libs/rem.js’;
然后通过媒体查询设置移动端样式。这样网页就可以完美适配PC端和移动端了。