此方案是借助两个插件，将px进行转化为rem。
- lib-flexible 用于设置 rem 基准值。由淘宝手机前端开发团队编写的。
- postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem。
一、lib-flexible
Install
npm i -S amfe-flexible
Import
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./node_modules/amfe-flexible/index.js"></script>
//或者
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: ['*']
})
]
}
}
}
}
