PostCSS自學筆記（二）【番外篇一】

利用PostCSS解決移動端REM適配問題

上一期有提到結合postcss-px2rem插件來處理移動端適配的方案，以及相關的避坑方法，以後總以爲這個解決方案問題太多，也就誕生了另外一套方案運用postcss-pxtorem插件來進行處理。

那麼這期番外篇講的就是postcss-px2rem和postcss-pxtorem的利弊了。

題外話，其實我也很好奇，爲何postcss-px2rem沒有被收錄在PostCSS插件列表中，難道是由於收錄者認爲postcss-pxtorem能夠取代它？不過二者各有利弊，就看開發者的喜愛了。

由於以前關於postcss-px2rem使用方法和可能存在的問題說的太多了，此次主要介紹postcss-pxtorem（截至2017年8月30日，我試過查找關於該插件的中文資料，徹底沒有）的基本功能和我的使用一些感覺。

首先，咱們用這個插件爲了就是要rem統治世界。然而，有些場景並不合適，好比1px邊框問題，咱們但願並不轉換這個邊框。（之前都說文字大小不建議轉換rem，我實在找不到有力證據在當前前端開發環境下保留字體大小的px值，所以此處不作處理）

這兩個插件處理忽略某些樣式的轉換方式是怎樣的呢？

postcss-px2rem經過註釋解決。

postcss-pxtorem經過配置規則和單位使用Px或PX來解決。

另外，這兩個插件各有什麼優點呢？

postcss-px2rem能夠生成根據dpr值不一樣的多個選擇器，官方主要用它來作字體大小的適配。以及多個版本的css文件。

postcss-pxtorem則有強大的轉換規則來適應不一樣的場景，下文將進行詳細介紹。

所以我的如今傾向於使用postcss-pxtorem，至因而否有坑，還有待考究。接下來，開始介紹如下postcss-pxtorem的使用方法。

採用postcss-pxtorem避免了postcss-nested註釋問題,具體配置大體以下

require('postcss-pxtorem')({
  rootValue: 75,
  unitPrecision: 5,
  propList: ['*'],
  selectorBlackList: [],
  replace: true,
  mediaQuery: false,
  minPixelValue: 12
})

假設設計稿750寬，這裏設置簡單說明一下（沒說的是我還沒弄明白或者是不重要的?）：

• rootValue爲75，說是對根元素大小進行設置。可能相似px2rem中的remUnit參數吧
• unitPrecision爲5，起初我真不知道這個官方說的The decimal numbers to allow the REM units to grow to.是啥意思，搞了半天才觀察出來，原來是轉換成rem後保留的小數點位數。。。
• propList是一個存儲哪些將被轉換的屬性列表，這裏設置爲['*']所有，假設須要僅對邊框進行設置，能夠寫['*', '!border*']意思是排除帶有border的屬性，固然這裏會有一個問題，也許有時候不想對border其餘樣式處理例如border-radius因此也不是很好。
• selectorBlackList則是一個對css選擇器進行過濾的數組，好比你設置爲['fs']，那例如fs-xl類名，裏面有關px的樣式將不被轉換，這裏也支持正則寫法。

• minPixelValue是一個很是不錯的選項，我設置了12，意思是全部小於12px的樣式都不被轉換，那麼border之類的屬性天然會保留px值了。而剛纔提到的border-radius若是爲了創造圓形等特殊較大圓弧時則仍是會轉換成rem，來配合對應的width和height（固然，你也能夠用繼承width或者height的變量來設置radius）。

  須要注意的是，如下狀況並不會保留爲px！

  .test-radius {
    width:20px;
    height:20px;
    border-radius: calc(@width / 2);
    background-color:#ccc;
  }

  根據反覆測試，calc運算是來自cssnano插件，然而cssnano有必要放在最後執行，因此沒法知足計算後的10px在進行pxtorem轉換，不過這種狀況也是比較合理的。假設width和height轉換爲rem，而圓角是px，我的感受不可避免的會形成圓形錯誤的狀況（是否有可能改圓角px值實際上永遠大於轉換後的rem的50%？有待考究！），因此這種狀況暫時就不考慮了，讓其單位均保持一致便可。

寫到這裏我又陷入了沉思，由於有個問題不明白了。根據postcss.config.js配置cssnano是在最後面，pxtorem是在其前面，那麼如何作到對此段樣式轉換的順序。

這段代碼應該先是postcss-property-lookup對@width進行處理，而後進行calc(@width / 2)計算，最後對px檢測轉換，再進行cssnano壓縮。而實際上有點詭異。難道postcss.config.js中插件的執行順序並不是單純的從上而下！但願不久的未來這個疑問將被解決，或者我也懷疑postcss官方文檔實際有指出，只是我的英文能力較差被我忽略掉了?。

另外一方面，關於此段CSS在畫圓上有一些須要注意的，其實這裏若是寫圓用50%便可，我發現某些狀況下（多是圓形很小）若是按照除以2的寫法轉換成rem彷佛不圓，因此在現代開發來看移動端畫圓就50%了！因此上例僅作測試好了~

額外閱讀，關於border-radius的一些事項。

對了忘了說了，css樣式代碼中將px寫成Px或者PX他也不會轉換成rem的~

最後附上我實際應用場景的demo，僅供你們測試使用。

其餘

關於我我的的PostCSS一系列學習, 介紹及總結, 有興趣能夠參閱:

• PostCSS自學筆記（一）【安裝使用篇】
• PostCSS自學筆記（二）【插件篇】
• PostCSS自學筆記（二）【番外篇一】
• PostCSS自學筆記（二）【番外篇二】