一、REM適配原理

rem是相對單位，rem是相對于HTML標(biāo)簽的字號(hào)計(jì)算結(jié)果，1rem = 1HTML字號(hào)大小。
那在不同尺寸的手機(jī)上給html的font-size設(shè)置不同的大小以保證所占比例一樣來實(shí)現(xiàn)適配。

列如：在寬度375px的手機(jī)上設(shè)置font-size為37.5px，在750px的手機(jī)上設(shè)置font-size為75px，那么給div設(shè)置寬度為5rem時(shí)都占屏幕寬度的一半。

1. 通過媒體查詢給不同寬度的設(shè)備設(shè)置基準(zhǔn)值

/*
* 通常將基準(zhǔn)值設(shè)置為寬度的1/10
*/
@media (width: 320px){
  html{
    font-size:32px
  }
}
@media (width: 375px){
  html{
    font-size:37.5px
  }
}

2. 使用flexible js設(shè)置基準(zhǔn)值

媒體查詢設(shè)置基準(zhǔn)值，需要有對應(yīng)的寬度才能進(jìn)行設(shè)置，手機(jī)屏幕分辨率經(jīng)常更新，不可能每個(gè)都適應(yīng)到，一般項(xiàng)目中會(huì)使用flexible
在項(xiàng)目中直接引入即可 <script src="build/flexible.debug.js"></script>

flexible會(huì)動(dòng)態(tài)獲取屏幕寬度，然后設(shè)置基準(zhǔn)值

  // flexible代碼
  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

3. 如何根據(jù)設(shè)計(jì)圖填寫rem值

• 根據(jù)設(shè)計(jì)圖的尺寸設(shè)置一個(gè)變量根尺寸@rootSize，如果設(shè)計(jì)圖是375px那么就是@rootSize: 37.5rem;如果設(shè)計(jì)圖是750px的那么就是@rootSize: 75rem;
• 在設(shè)置寬度時(shí)，用量到的寬度/@rootSize 如：height: (160 / @rootSize);

在VUE項(xiàng)目中進(jìn)行rem適配

使用vue開發(fā)移動(dòng)端項(xiàng)目的時(shí)候，默認(rèn)一般都是px作為單位，如果要使用rem單位，可以使用以下兩個(gè)插件將px轉(zhuǎn)換為rem

• postcss-pxtorem 用于將px單位轉(zhuǎn)化為rem
• 用于設(shè)置rem基準(zhǔn)值

1.使用lib-flexible設(shè)置rem基準(zhǔn)值（html 標(biāo)簽的font-size）

安裝依賴：

# yarn add amfe-flexible
npm i amfe-flexible

在mian.js中加載該模塊

import 'amfe-flexible'

這時(shí)候切換不同設(shè)備尺寸的，可以看到html標(biāo)簽上font-size的變化

2.使用postcss-pxtorem 將px轉(zhuǎn)為rem

安裝依賴：

# yarn add -D postcss-pxtorem
# -D 是 --save-dev 的簡寫
npm install postcss-pxtorem -D

在項(xiàng)目根目錄創(chuàng)建postcss.config.js文件

module.exports = {
  plugins: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5, # 表示根元素字體大小，它會(huì)根據(jù)根元素大小進(jìn)行單位轉(zhuǎn)換
      propList: ['*'] # 用來設(shè)定可以從 px 轉(zhuǎn)為 rem 的屬性
      # * 就是所有屬性都要轉(zhuǎn)換，width 就是僅轉(zhuǎn)換 width 屬性
    }
  }
}

重新啟動(dòng)服務(wù)，就可以看到css樣式中的px單位都變成了rem單位

行內(nèi)樣式不會(huì)生效

postcss.config.js文件說明

1. PostCss

PostCSS 是一個(gè)允許使用 JS 插件轉(zhuǎn)換樣式的工具。 這些插件可以檢查（lint）你的 CSS，支持 CSS Variables 和 Mixins， 編譯尚未被瀏覽器廣泛支持的先進(jìn)的 CSS 語法，內(nèi)聯(lián)圖片，以及其它很多優(yōu)秀的功能。

PostCSS 被廣泛地應(yīng)用，其中不乏很多有名的行業(yè)領(lǐng)導(dǎo)者，如：維基百科，Twitter，阿里巴巴， JetBrains。PostCSS 的 Autoprefixer 插件是最流行的 CSS 處理工具之一。

PostCSS 接收一個(gè) CSS 文件并提供了一個(gè) API 來分析、修改它的規(guī)則（通過把 CSS 規(guī)則轉(zhuǎn)換成一個(gè)抽象語法樹的方式）。在這之后，這個(gè) API 便可被許多插件利用來做有用的事情，比如尋錯(cuò)或自動(dòng)添加 CSS vendor 前綴。

截止到目前，PostCSS 有 200 多個(gè)功能各異的插件。你可以在 插件列表 或 搜索目錄 找到它們。

PostCSS 是一個(gè)處理 CSS 的處理工具，本身功能比較單一，它主要負(fù)責(zé)解析 CSS 代碼，再交由插件來進(jìn)行處理，它的插件體系非常強(qiáng)大，所能進(jìn)行的操作是多種多樣的，例如：

• Autoprefixer 插件可以實(shí)現(xiàn)自動(dòng)添加瀏覽器相關(guān)的聲明前綴

• PostCSS Preset Env 插件可以讓你使用更新的 CSS 語法特性并實(shí)現(xiàn)向下兼容

• postcss-pxtorem 可以實(shí)現(xiàn)將 px 轉(zhuǎn)換為 rem

• ...
  PostCSS 一般不單獨(dú)使用，而是與已有的構(gòu)建工具進(jìn)行集成。

Vue CLI 默認(rèn)集成了 PostCSS，并且默認(rèn)開啟了 autoprefixer 插件。

Vue CLI 內(nèi)部使用了 PostCSS。
可以通過 .postcssrc 或任何 postcss-load-config 支持的配置源來配置 PostCSS。也可以通過 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。
vue cli已經(jīng)默認(rèn)開啟了 autoprefixer。如果要配置目標(biāo)瀏覽器，可使用 package.json 的 browserslist 字段。

autoprefixer

autoprefixer 是一個(gè)自動(dòng)添加瀏覽器前綴的 PostCss 插件，browsers 用來配置兼容的瀏覽器版本信息，但是寫在這里的話會(huì)引起編譯器警告。

Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.

Using browsers option can cause errors. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.

If you really need to use option, rename it to overrideBrowserslist.

Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist

警告意思就是說你應(yīng)該將 browsers 選項(xiàng)寫到 package.json 或 .browserlistrc 文件中。
browserslist：

你會(huì)發(fā)現(xiàn)有 package.json 文件里的 browserslist 字段 (或一個(gè)單獨(dú)的 .browserslistrc 文件)，指定了項(xiàng)目的目標(biāo)瀏覽器的范圍。這個(gè)值會(huì)被 @babel/preset-env 和 Autoprefixer 用來確定需要轉(zhuǎn)譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴。

參考官方文檔中的語法，我們將 .browserslistrc 修改如下：

Android >= 4.0
iOS >= 8

postcss-pxtorem

• rootValue：表示根元素字體大小，它會(huì)根據(jù)根元素大小進(jìn)行單位轉(zhuǎn)換
• propList 用來設(shè)定可以從 px 轉(zhuǎn)為 rem 的屬性；例如 * 就是所有屬性都要轉(zhuǎn)換，width 就是僅轉(zhuǎn)換 width 屬性

如果你使用的是基于 lib-flexable 的 REM 適配方案，則應(yīng)該設(shè)置為你的設(shè)計(jì)稿的十分之一。
例如設(shè)計(jì)稿是 750 寬，則應(yīng)該設(shè)置為 75。
但是如 Vant 建議設(shè)置為 37.5，所以如果用vant的話就設(shè)置成37.5，這時(shí)就要注意設(shè)計(jì)搞和配置基準(zhǔn)的換算