步骤一:
npm i lib-flexible --save
npm install postcss-pxtorem -D
步骤二:
在项目根目录下创建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: 37.5, //此值为根标签的fontSize的值,计算方式为【**设计稿宽度/10**】. 结果为:设计稿元素尺寸/37.5,比如元素宽375px,最终页面会换算成 10rem
propList: ["*"], //是一个存储哪些将被转换的属性列表,这里设置为['*']全部,假设需要仅对边框进行设置,可以写['*', '!border*']
unitPrecision: 5, //保留rem小数点多少位
//selectorBlackList: ['.radius'], //则是一个对css选择器进行过滤的数组,比如你设置为['fs'],那例如fs-xl类名,里面有关px的样式将不被转换,这里也支持正则写法。
replace: true, //这个真不知到干嘛用的。有知道的告诉我一下
mediaQuery: false, //媒体查询( @media screen 之类的)中不生效
minPixelValue: 12, //px小于12的不会被转换
},
},
};
步骤三:
在main.js中引入模块
import 'lib-flexible'
如上,就可以在项目中直接写设计稿上测量出的宽高了,比如设计稿上量出宽为130px,我们就直接在项目中写130px,插件会自动帮我们把它换算成正确的rem。
如果是非手机端项目,设计稿不是375或750等手机常规宽度时,比如设计稿为1444px,按上述方法配置出来效果会不符合预期,那是因为lib-flexible插件设置根标签的fontSize时有个最大限制,源代码如下:
可将postcss.config.js配置中rootValue设为:54,或自己写个rem.js并在main.js中引入,相应的,main.js中就不需要引入lib-flexible了。
rem.js文件
(function() {
const baseSize = 16; // 32
function setRem() {
/*
scale = document.documentElement.clientWidth /设计稿宽度,
我的设计稿的宽度是1444px
*/
const scale = document.documentElement.clientWidth / 1444; // 750
document.documentElement.style.fontSize =
baseSize * Math.min(scale, 2) + "px";
}
setRem()
window.onresize = function() {
setRem();
};
})();
postcss.config.js文件中的rootValue就是rem.js中 baseSize的值。
我这个rem.js文件写得比较简单,仅供参考