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一系列學習, 介紹及總結, 有興趣可以參閱: