原理
利用 flexible和 postcss-px2rem
flexible用途:
lib-flexible会自动在为你添加meta name="viewport"的标签,同时会自动设置html的font-size为屏幕宽度除以10,也就是1rem等于html根节点的font-size。
postcss-px2rem:
postcss-px2rem会将你代码中的px转换为rem
安装
添加依赖
npm install lib-flexible --save
npm install postcss-px2rem --save
设置html meta代码
在根目录的index.html 的头部加入手机端适配的meta代码
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
utils.js中添加转换规则
remUnit的设置,就是1rem=37.5px,设置 1rem等于html根节点的font-size,如果根据设计稿开发,需要考虑UI给的几倍图
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5
}
}