一、利用lib-flexible、postcss-plugin-px2rem插件 进行移动端rem适配。
1、第一
引入lib-flexible .
安装lib-flexible: npm i lib-flexible --save-dev
在项目的入口main.js文件中引入lib-flexible: import 'lib-flexible',
在index.html中 是否 去掉meta name="viewport" 标签 要看框架具体情况,具体请看第四条,
2、第二
使用postcss-plugin-px2rem自动将css中的px转换成rem(真的是大大提升了我们的工作效率,棒棒的,不用自己去瞎算啊)
安装postcss-plugin-px2rem : npm install postcss-plugin-px2rem --save-dev
3、第三 配置postcss
在根目录下 找到.postcssrc.js文件配置如下:
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
"postcss-plugin-px2rem": {
rootValue: 75, //换算基数, 默认1