移動端rem適配(關於PostCSS檔案配置)

語言: CN / TW / HK

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

      image-20210821090630364

使用 postcss-pxtorempx 轉為 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

    • 轉換之前的樣式

      image-20210821101228618

    • 轉換之後的樣式

image-20210821101100409

  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 程式碼,再交由外掛來進行處理,它的外掛體系非常強大,所能進行的操作是多種多樣的,例如

    • 目前 PostCSS 已經有 200 多個功能各異的外掛。開發人員也可以根據專案的需要,開發出自己的 PostCSS 外掛

  2. PostCSS 一般不單獨使用,而是與已有的構建工具進行整合

Autoprefixer 外掛的配置

  1. autoprefixer 是一個自動新增瀏覽器字首的 PostCss 外掛,browsers 用來配置相容的瀏覽器版本資訊

023 - autoprefixer

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

    • 警告意思就是說你應該將 browsers 選項寫到 package.json.browserlistrc 檔案中
    • Vue-cli 中已經預設開啟了 autoprefixer,所以把這兩行程式碼註釋
    • 註釋後重啟服務就可以解決掉警告資訊

024 - autoprefixer 警告

postcss-pxtorem 外掛的配置

  1. postcss-pxtorem 外掛的配置

    • rootValue:表示根元素字型大小,它會根據根元素大小進行單位轉換

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

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

    025 - postcss-pxtorem

  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 中開啟單位與標尺設定面板:選單欄 -> 編輯 -> 首選項 -> 單位與標尺。

    image-20200507235054962

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

    開啟設定影象大小面板:

    • 選單欄 -> 影象 -> 影象大小
    • 快捷鍵:Alt + Ctrl + I

    image-20200507235701900

    • 關閉重新取樣
    • 將寬度單位設定為
    • 將高度單位設定為
    • 將寬度修改為 375,高度不用動(它會適應寬度自動調整)

    點選確定完成修改。

    調整之後,我們可以看到影象的大小變成了 375 點 x 667 點(144 ppi)。

    在 iPhone 6/7/8 裝置下,1個點 = 2個物理畫素,所以你看到我們匯出的圖片還是原來的二倍圖。

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