持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情
这里会将项目中的 px 单位，自动转为rem 单位，行内样式中的px单位无法转换，index.html中<head>里的style中的px单位也无法转换，一定要注意！！！
rem适配方案
1.在项目中index.html的头部标签加入下面这句话，让不同设备的浏览器的视口取最佳CSS像素
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
content属性值 :
width:可视区域的宽度，值可为数字或关键词device-width intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放 maximum-scale：允许用户缩放到的最小比例， minimum-scale ：允许用户缩放到的最大比例，都为1即不可缩放 maximum-scale：用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。 user-scalable：是否可对页面进行缩放，no 禁止缩放
2、下载依赖
npm install postcss-pxtorem -D
3、新建一个rem.js的文件，在main.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()
}
4、再postcss.config.js里添加如下代码
module.exports = {
plugins: {
// 兼容浏览器，添加前缀
autoprefixer: {
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8",
"last 10 versions", // 所有主流浏览器最近10版本用
],
grid: true,
},
"postcss-pxtorem": {
rootValue: 20, //结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']
unitPrecision: 5, //保留rem小数点多少位
//selectorBlackList: ['.radius'], //则是一个对css选择器进行过滤的数组，比如你设置为['fs']，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
replace: true, //这个真不知到干嘛用的。有知道的告诉我一下
mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
minPixelValue: 12, //px小于12的不会被转换
},
},
};
// 蓝湖上设计稿自定义为375px 测量值直接写入即可 若设计稿为750px 则rootValue: 32
重新运行项目，这样项目css里面使用px就会自动转化为rem以适配各种屏幕尺寸。写代码过程中，直接用蓝湖或者量出的设计稿尺寸进行布局就好了，大大加快了布局效率
