VUE中Rem 适配解决方案

此方案是借助两个插件，将px进行转化为rem。

• lib-flexible 用于设置 rem 基准值。由淘宝手机前端开发团队编写的。
• postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem。

一、lib-flexible

Install

npm i -S amfe-flexible

Import

//或者
import 'amfe-flexible'; //引入rem自适应

二、postcss-pxtorem

Install

npm install postcss-pxtorem --save-dev

Import

在vue-cli2下，根目录中的 .postcss.js (没有，就新建一个)

module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
"postcss-pxtorem": { // 此处为添加部分
rootValue: 37.5, // 对应16px 适配移动端750px宽度
unitPrecision: 5,
propList: ['*'],
selectorBlackList: [],
replace: true,
mediaQuery: false,
minPixelValue: 0
}
}
}

在vue-cli3下,根目录中的 vue.config.js (没有，就新建一个)

module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require('postcss-pxtorem')({ // 把px单位换算成rem单位
rootValue: 37.5, // 换算的基数(设计图750的根字体为32)
selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
propList: ['*']
})
]
}
}
}
}