移動端rem適配(關於PostCSS文件配置）

---

highlight: an-old-hope

移動端 REM 適配

1. Vant 中的樣式默認使用 px 作為單位，如果需要使用 rem 單位，推薦使用以下兩個工具：

   • lib-flexible 用於設置 rem 基準值，設置根字體的大小

   • postcss-pxtorem 是一款 postcss 插件，用於將單位轉化為 rem

     自動將px單位轉換成rem

使用 lib-flexible 動態設置 REM 基準值

html 標籤的字體大小

1. 安裝

   cmd // yarn add amfe-flexible ​ npm i amfe-flexible -S

2. 然後在 main.js 中加載執行該模塊

   js import 'amfe-flexible'

3. 最後測試：在瀏覽器中切換不同的手機設備尺寸，觀察 html 標籤 font-size 的變化

   • 例如在 iPhone 6/7/8 設備下，html 標籤字體大小為 37.5 px

     原理：是將一行分成10份 例如 375/10=37.5

     

使用 postcss-pxtorem 將 px 轉為 rem

1. 安裝

   cmd // yarn add -D postcss-pxtorem // -D 是 --save-dev 的簡寫 ​ npm install postcss-pxtorem -D

   postcss-pxtorem 的版本為 [email protected]

2. 然後在項目根目錄中創建 .postcssrc.js 文件

   js module.exports = {  plugins: {    'autoprefixer': {      browsers: ['Android >= 4.0', 'iOS >= 8']   },    'postcss-pxtorem': {      rootValue: 37.5,      propList: ['*']   } } }

   注意 行內樣式的單位不會轉換 例如：<div style="width：200px;"></div>。

3. 配置完畢，重新啟動服務

   cmd npm run serve

4. 最後測試：刷新瀏覽器頁面，審查元素的樣式查看是否已將 px 轉換為 rem

   • 轉換之前的樣式

     

   • 轉換之後的樣式

1. 注意事項：

   • 該插件不能轉換行內樣式中的 px，例如 <div style="width: 200px;"></div>

   .postcssrc.js 配置文件

.postcssrc.js 的配置

1. .postcssrc.js 是 PostCSS 的配置文件，具體配置如下

   js module.exports = {  plugins: {    'autoprefixer': {      browsers: ['Android >= 4.0', 'iOS >= 8']   },    'postcss-pxtorem': {      rootValue: 37.5,      propList: ['*']   } } } ​

注意在vue-cli中默認開啟了 autoprefixer這裏會引起編譯器警告詳情參考下述Autoprefixer 插件的配置

PostCSS 介紹

1. PostCSS 介紹

   • PostCSS 是一個處理 CSS 的處理工具，本身功能比較單一，它主要負責解析 CSS 代碼，再交由插件來進行處理，它的插件體系非常強大，所能進行的操作是多種多樣的，例如

     • Autoprefixer 插件可以實現自動添加瀏覽器相關的聲明前綴
     • PostCSS Preset Env 插件可以讓你使用更新的 CSS 語法特性並實現向下兼容
     • postcss-pxtorem 可以實現將 px 轉換為 rem

   • 目前 PostCSS 已經有 200 多個功能各異的插件。開發人員也可以根據項目的需要，開發出自己的 PostCSS 插件

2. PostCSS 一般不單獨使用，而是與已有的構建工具進行集成

   • 文檔介紹
   • Vue CLI 默認集成了 PostCSS，並且默認開啟了 autoprefixer 插件
   • Vue CLI 內部使用了 PostCSS，你可以通過 .postcssrc 或任何 postcss-load-config 支持的配置源來配置 PostCSS。也可以通過 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader
   • 我們默認開啟了 autoprefixer。如果要配置目標瀏覽器，可使用 package.json 的 browserslist 字段

Autoprefixer 插件的配置

1. autoprefixer 是一個自動添加瀏覽器前綴的 PostCss 插件，browsers 用來配置兼容的瀏覽器版本信息

1. 但是寫在這裏的話會引起編譯器警告

   • 警告意思就是説你應該將 browsers 選項寫到 package.json 或 .browserlistrc 文件中
   • 在 Vue-cli 中已經默認開啟了 autoprefixer，所以把這兩行代碼註釋
   • 註釋後重啟服務就可以解決掉警告信息

postcss-pxtorem 插件的配置

1. postcss-pxtorem 插件的配置

   • rootValue：表示根元素字體大小，它會根據根元素大小進行單位轉換

   • propList 用來設定可以從 px 轉為 rem 的屬性

     • 例如 * 就是所有屬性都要轉換，width 就是僅轉換 width 屬性

   

2. rootValue 應該如何設置呢

   text 如果你使用的是基於 lib-flexable 的 REM 適配方案，則應該設置為你的設計稿的十分之一。 例如設計稿是 750 寬，則應該設置為 75。

   大多數設計稿的原型都是以 iphone6 為原型，iphone6 設備的寬是 750，我們的設計稿也是這樣。

   但是 Vant 建議設置為 37.5，為什麼呢？

   text 因為 Vant 是基於 375 寫的，所以如果你設置為 75 的話，Vant 的樣式就小了一半。

   所以如果設置為 37.5 的話，Vant 的樣式是沒有問題的，但是我們在測量設計稿的時候都必須除2才能使用，否則就會變得很大。

   這樣做其實也沒有問題，但是有沒有更好的辦法呢？我就想實現測量多少寫多少（不用換算）。於是聰明的你就想，可以不可以這樣來做？

   • 如果是 Vant 的樣式，就把 rootValue 設置為 37.5 來轉換
   • 如果是我們的樣式，就按照 75 的 rootValue 來轉換

3. 通過查閲文檔我們可以看到 rootValue 支持兩種參數類型

   • 數字：固定值

   • 函數：動態計算返回

     • postcss-pxtorem 處理每個 CSS 文件的時候都會來調用這個函數
     • 它會把被處理的 CSS 文件相關的信息通過參數傳遞給該函數

   • 修改配置如下

   ```js /* * PostCSS 配置文件 / ​ module.exports = {  // 配置要使用的 PostCSS 插件  plugins: {    // 配置使用 autoprefixer 插件    // 作用：生成瀏覽器 CSS 樣式規則前綴

   // VueCLI 內部已經配置了 autoprefixer 插件    // 所以又配置了一次，所以產生衝突了

   // 'autoprefixer': { // autoprefixer 插件的配置    //   // 配置要兼容到的環境信息    //   browsers: ['Android >= 4.0', 'iOS >= 8']    // }, ​    // 配置使用 postcss-pxtorem 插件    // 作用：把 px 轉為 rem    'postcss-pxtorem': {      rootValue ({ file }) {        return file.indexOf('vant') !== -1 ? 37.5 : 75     },      propList: ['*']   } } } ​ ```

4. 其他

   ```js [Android]

   = 4.0 ​ [iOS] = 8 ​ ```

   • 具體語法請參考這裏

5. 不用寫代碼的方式

   在 Photoshop 中打開單位與標尺設置面板：菜單欄 -> 編輯 -> 首選項 -> 單位與標尺。

   

   將單位中的標尺和文字的單位修改為點

   打開設置圖像大小面板：

   • 菜單欄 -> 圖像 -> 圖像大小
   • 快捷鍵：Alt + Ctrl + I

   

   • 關閉重新採樣

   • 將寬度單位設置為點

   • 將高度單位設置為點

   • 將寬度修改為 375，高度不用動（它會適應寬度自動調整）

   點擊確定完成修改。

   調整之後，我們可以看到圖像的大小變成了 375 點 x 667 點（144 ppi）。

   在 iPhone 6/7/8 設備下，1個點 = 2個物理像素，所以你看到我們導出的圖片還是原來的二倍圖。

6. 配置完畢，把服務重啟一下，最後測試。