1 前言

移動端自適應(yīng)需要做適配，本文介紹vue-cli3+px2rem-loader+scss的配置

2 安裝

amfe-flexible：根據(jù)設(shè)備寬度，修改根元素html的大小，以適配不一樣終端
px2rem-loader：將css中的px轉(zhuǎn)為rem單位，用了它就不用本身計算rem值了

注意：amfe-flexible是lib-flexible的優(yōu)化，主要區(qū)別是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干了什么呢？

• 給元素動態(tài)改寫font-size的值
• 設(shè)置1rem = viewWidth / 10
• 設(shè)置頁面刷新時重置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 // 設(shè)計稿的寬度的1/10
      }).end()
  }
}

然后重啟腳手架

5 參考文章

《vue移動端h5適配解決方案（rem or vw）》
《vue-cli3+lib-flexible+postcss-px2rem+less》