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》
