一、为什么要rem适配
如果不对各种不同分辨率的设备进行适配,移动端界面样式就会乱掉。
二、rem适配方法
要借助两个工具
1.lib-flexible
2.postcss-pxtorem
三、具体操作
首先安装lib-flexible
执行
npm i amfe-flexible
安装后main.js中引入
import 'amfe-flexible'
然后安装postcss-pxtorem
npm install postcss-pxtorem -D
项目根目录下新建postcss.config.js文件,将下面代码复制到刚刚新创建的文件中
module.exports = {
plugins: {
autoprefixer:{
overrideBrowserslist:['Android>=4.0','iOS>=8'],
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
},
},
};
上面操作完成后重新启动项目
补充:如果报错“ Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.”
解决方法,分两步
1.执行npm uninstall post-pxtorem
2.执行npm i postcss-pxtorem@5.1.1