在講今天正文前，先給大家講一個小故事：

大佬：rem，em，px有什麼區別？

我：rem是相對單位，值基於根元素設定的font-size值（預設16px），em也是相對單位，值繼承父元素font-size值，px則是絕對單位。

大佬：px怎麼轉rem ？

我：16px = 1rem，所以將 轉換值 / 16 就可轉換。

大佬：那每個地方我都手算一遍 ？

我：。。。 不然呢。

一個BE，感謝大佬最後告訴我一個關鍵詞PostCss，漲姿勢了。

拋磚引玉，今天主要介紹的主題就是PostCss（https：//www。postcss。com。cn/）。

那什麼是PostCss呢？用官方話術將是一個用JavaScript工具和外掛轉換CSS程式碼的工具。

宣告：它不是 “ 預處理器 ”，因它沒有像使用預處理那些功能，且能和預處理器結合使用；它也不是一個真正的 “ 後處理器 ”。因後處理器通常被視為在完成的樣式表中根據CSS規範處理CSS，常做的是CSS屬性新增瀏覽器私有字首，但PostCSS並不侷限於此。所以，最好的解釋，它是個處理器（平臺），擁有多樣化的功能外掛，可根據自己的需要配置需要的功能，甚至你自己都可編寫PostCSS外掛。

常用的外掛有autoprefixer新增瀏覽器私有字首，cssnext允許使用瀏覽器不支援的CSS新特性。感興趣的可以根據關鍵詞查一查，用一用。

回到主題，px自動化轉rem需要什麼外掛？

答案是postcss-pxtorem。

既然知道了是什麼外掛，

那該如何安裝呢？

新增完畢，嘗試重啟下專案，使檔案生效。

重啟後，開啟Chrome控制檯，可以發現所有的px都被自動轉化為rem。

根據配置可知，我們是以font-size為基準實現頁面尺寸佈局的，但如果一直寫死16，如何實現自適應佈局？

為了達到在不同裝置寬度下對應不同的基準值，還需新建rem。js，程式碼如下。

核心思想： 以設計稿定義的寬1920，根元素字型大小16為基準，動態計算不同螢幕下的不同根元素的字型大小。

然後在公共的js檔案中匯入就好了。