【CSS】1351- 為什么說(shuō)移動(dòng)端該放棄rem適配方案了？

作者：去偽存真

https://juejin.cn/post/7084926646033055752

1.背景

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

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

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

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

• 語(yǔ)義化更好, rem從本義上來(lái)說(shuō)，是一種字體單位，不是用來(lái)做布局和各種屏幕尺寸大小適配的，如上面的示例，用rem做適配單位，計(jì)算根字體的時(shí)候，計(jì)算公式中的100這個(gè)參數(shù)讓人感覺(jué)很費(fèi)解，viewport詞更達(dá)意。
• 
  

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

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

看到網(wǎng)上的教程都是說(shuō)要在項(xiàng)目中安裝postcss-px-to-viewport工具包，然而安裝和配置完postcss-px-to-viewport之后，運(yùn)行項(xiàng)目，發(fā)現(xiàn)命令行出現(xiàn)如下報(bào)錯(cuò)：

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

說(shuō)安裝的postcss-px-to-viewport已經(jīng)過(guò)時(shí)了，遷移指南參考evilmartians.com/chronicles/…^[1]

點(diǎn)進(jìn)入一看，根本找不到配置px轉(zhuǎn)vw單位的方法。后面經(jīng)過(guò)一番嘗試之后，最終找到了正確的使用方法。

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

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

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

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

4 效果演示

在項(xiàng)目中直接寫(xiě)px,運(yùn)行項(xiàng)目之后，可以看到px已經(jīng)轉(zhuǎn)換成vw單位了

#app{
  width:100px
}

需要注意的是：

• 1.postcss-px-to-viewport 對(duì)內(nèi)聯(lián)css樣式，外聯(lián)css樣式，內(nèi)嵌css樣式有效，對(duì)js動(dòng)態(tài)css無(wú)效。所以要?jiǎng)討B(tài)改變css展示效果的話，要使用靜態(tài)的class定義變化樣式，通過(guò)js改變dom元素的class實(shí)現(xiàn)樣式變化。
• 2.Vant組件的設(shè)計(jì)稿尺寸是375px，可用通過(guò)覆蓋:root下的Vant的css變量中px單位的方式，對(duì)Vant組件做適配
• 
  

3.vue模板中的px單位不會(huì)被轉(zhuǎn)換，如需轉(zhuǎn)換請(qǐng)使用postcss-style-px-to-viewport^[2]工具

本文僅代表個(gè)人觀點(diǎn)，非喜勿噴。

參考資料

點(diǎn)個(gè)在看支持我吧，轉(zhuǎn)發(fā)就更好了