【CSS】1750- 為什么說移動端該放棄rem適配方案了？

作者：去偽存真

https://juejin.cn/post/7084926646033055752

1.背景

在做移動端各種尺寸屏幕的適配時，用的最多的就是rem方案。我們都寫過這樣的代碼,來設置根字體大小。這個計算公式中設備寬度，UI設計稿尺寸這兩個參數比較好理解，可是為什么要除以100呢，為什么不是10,50或者其它的數值呢。

const setRem = () => {
  const deviceWidth = document.documentElement.clientWidth;
  // 獲取相對UI稿，屏幕的縮放比例
  const rem = (deviceWidth *100) / 750;
  // 動態(tài)設置html的font-size
  document.querySelector( html ).style.fontSize =  rem +  px ;
};

查了一番資料才得知，rem方案是viewport的過渡方案，將設計稿除以100，等分為7.5份來實現移動端不同屏幕尺寸適配的原理，與viewport中vw單位的定義，設計思想與想要解決的問題，是相同的。當時瀏覽器對viewport的支持性不好，而現在已經是2022年了，可以看到，各大瀏覽器廠商，對viewport的支持率已經很高了。可以放心使用。

2. 相對于rem的優(yōu)勢

• 語義化更好, rem從本義上來說，是一種字體單位，不是用來做布局和各種屏幕尺寸大小適配的，如上面的示例，用rem做適配單位，計算根字體的時候，計算公式中的100這個參數讓人感覺很費解，viewport詞更達意。
• 
  

可以直接在代碼中書寫px,借助postcss-px-to-viewport插件轉換成vw單位，完美適配移動端各種屏幕尺寸。不用像之前那樣，一是要在藍湖上設置根字體基準尺寸，將設計稿標注的px單位轉換成rem單位，然后摘抄到代碼中。二是需要用js計算設置根字體大小。前端開發(fā)天然喜歡px單位，像rem,em,vw，vh這些單位，一般都不是UI設計稿標注的尺寸，開發(fā)時需要轉換成本。不如直接在代碼中寫px直觀高效。

3. postcss-px-to-viewport方案正確的使用姿勢

看到網上的教程都是說要在項目中安裝postcss-px-to-viewport工具包，然而安裝和配置完postcss-px-to-viewport之后，運行項目，發(fā)現命令行出現如下報錯：

postcss-px-to-viewport: postcss.plugin was deprecated. Migration guide: https://evilmartians.com/chronicles/postcss-8-plugin-migration

說安裝的postcss-px-to-viewport已經過時了，遷移指南參考evilmartians.com/chronicles/…^[1]

點進入一看，根本找不到配置px轉vw單位的方法。后面經過一番嘗試之后，最終找到了正確的使用方法。

3.1 安裝postcss-px-to-viewport-8-plugin

yarn add -D postcss-px-to-viewport-8-plugin

3.2 在項目下創(chuàng)建postcss.config.js

module.exports = {
  plugins: {
     postcss-px-to-viewport-8-plugin : {
      unitToConvert:  px , // 需要轉換的單位，默認為"px"
      viewportWidth: 750, // 設計稿的視口寬度
      unitPrecision: 5, // 單位轉換后保留的精度
      propList: [ * , !font-size ], // 能轉化為vw的屬性列表,!font-size表示font-size后面的單位不會被轉換
      viewportUnit:  vw , // 希望使用的視口單位
      fontViewportUnit:  vw , // 字體使用的視口單位
      // 需要忽略的CSS選擇器，不會轉為視口單位，使用原有的px等單位。
      // 下面配置表示類名中含有 keep-px 都不會被轉換
      selectorBlackList: [ keep-px ],
      minPixelValue: 1, // 設置最小的轉換數值，如果為1的話，只有大于1的值會被轉換
      mediaQuery: false, // 媒體查詢里的單位是否需要轉換單位
      replace: true, //  是否直接更換屬性值，而不添加備用屬性
      exclude: [/node_modules/], // 忽略某些文件夾下的文件或特定文件，例如  node_modules  下的文件
      include: [/src/], // 如果設置了include，那將只有匹配到的文件才會被轉換
      landscape: false, // 是否添加根據 landscapeWidth 生成的媒體查詢條件 @media (orientation: landscape)
      landscapeUnit:  vw , // 橫屏時使用的單位
      landscapeWidth: 1338, // 橫屏時使用的視口寬度
    },
  },
};

4 效果演示

在項目中直接寫px,運行項目之后，可以看到px已經轉換成vw單位了

#app{
  width:100px
}

需要注意的是：

• 1.postcss-px-to-viewport 對內聯css樣式，外聯css樣式，內嵌css樣式有效，對js動態(tài)css無效。所以要動態(tài)改變css展示效果的話，要使用靜態(tài)的class定義變化樣式，通過js改變dom元素的class實現樣式變化。
• 2.Vant組件的設計稿尺寸是375px，可用通過覆蓋:root下的Vant的css變量中px單位的方式，對Vant組件做適配
• 
  

3.vue模板中的px單位不會被轉換，如需轉換請使用postcss-style-px-to-viewport^[2]工具

本文僅代表個人觀點，非喜勿噴。

參考資料

點個在看支持我吧，轉發(fā)就更好了