1 前言
移动端自适应需要做适配，本文介绍vue-cli3+px2rem-loader+scss的配置
2 安装
amfe-flexible：根据设备宽度，修改根元素html的大小，以适配不一样终端
px2rem-loader：将css中的px转为rem单位，用了它就不用本身计算rem值了
注意：amfe-flexible是lib-flexible的优化，主要区别是amfe-flexible不会改变视口大小
安装amfe-flexible和px2rem-loader:
npm install amfe-flexible -save
npm install px2rem-loader -save-dev
3 配置amfe-flexible
在入口文件main.js文件中引入amfe-flexible：
import 'amfe-flexible/index.js'
在index.html中修改meta：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
amfe-flexible干了什么呢？
- 给元素动态改写font-size的值
- 设置1rem = viewWidth / 10
- 设置页面刷新时重置rem
- 支持0.5px
4 配置px2rem-loader
在vue.config.js中配置：
module.exports = {
chainWebpack: config => {
config.module
.rule('scss')
.test(/\.scss$/)
.oneOf('vue')
.use('px2rem')
.loader('px2rem-loader')
.before('postcss-loader')
.options({
remUnit: 75 // 设计稿的宽度的1/10
}).end()
}
}
然后重启脚手架
5 参考文章
《vue移动端h5适配解决方案（rem or vw）》
《vue-cli3+lib-flexible+postcss-px2rem+less》
