在講今天正文前,先給大家講一個小故事:
大佬: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檔案中匯入就好了。