移动端REM适配

移动端REM适配

两个工具

• postcss-pxtorem
• lib-flexible

(1)使用postcss-pxtorem将px转换成rem

安装依赖

yarn add -D postcss-pxtorem
npm install postcss-pxtorem -D

在项目根目录创建postcss.config.js文件

module.exports={
plugins:{
//浏览器适配 可以在.browserslist文件中配置 也可以写在package.json中
	'autoprefixer':{
		browers:['Android >= 4.0','iOS >= 8']
		}
//自动转成rem
	'postcss-pxtorem':{
	//rootValue表示根元素字体大小，它会根据根元素大小进行单位转换
		rootValue:37.5,
	//propList用来设定可以从 px 转为 rem 的属性 *表示所有属性
		propList:[*]
		}	
	}
}

(2）使用 lib-flexible动态设置 REM 基准值（html 标签的字体大小）

安装依赖

yarn add amfe-flexible
npm i amfe-flexible

然后在main.js中加载执行该模块：

import 'amfe-flexible'