移动端rem适配

一、为什么要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