国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Harpsichord1207 / 2297人閱讀

摘要：通過配置規則和單位使用或來解決。其他關于我個人的一系列學習介紹及總結有興趣可以參閱自學筆記一安裝使用篇自學筆記二插件篇自學筆記二番外篇一自學筆記二番外篇二

利用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，說是對根元素大小進行設置?？赡茴愃苝x2rem中的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%即可，我發現某些情況下（可能是圓形很?。┤绻凑粘?的寫法轉換成rem似乎不圓，所以在現代開發來看移動端畫圓就50%了！所以上例僅做測試好了~

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

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

最后附上我實際應用場景的demo，僅供大家測試使用。

其他

關于我個人的PostCSS一系列學習, 介紹及總結, 有興趣可以參閱:

PostCSS自學筆記（一）【安裝使用篇】

PostCSS自學筆記（二）【插件篇】

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112494.html

相關文章

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

    摘要：之前有研究過做過假設，在插件列表中，的插件執行順序自上而下，一切看起來似乎是沒有任何問題的。再有摘自深入設計摘自寫的姿勢這兩張圖則應該是說明了我之前的假設，插件中的執行順序自上而下。先來看看一片來自的這段會不會跟這個有關呢，我先埋個伏筆。 圖解PostCSS的插件執行順序 文章其實是一系列的早就寫完了. 才發現忘了發在SegmentFault上面, 最早發布于https://gitee...

    FleyX 評論0 收藏0

  • PostCSS自學筆記（一）【安裝使用篇】

    摘要：而則可制定個人需求的一套解決方案僅安裝需要的插件。迫不及待的你已經等不及安裝使用了吧。安裝及使用一般是結合自動化工具使用，如果要單獨使用可以安裝，這里我先對的安裝使用講解下。接下來說點實際的，如何利用結合自動化工作在項目中使用。 PostCSS介紹 PostCSS是一個利用JS插件來對CSS進行轉換的工具，這些插件非常強大，強大到無所不能。其中，Autoprefixer就是眾多Post...

    jsummer 評論0 收藏0

  • PostCSS自學筆記（二）【插件篇】

    摘要：本期主要介紹以下幾個插件和幾個坑和坑這個就不用多說了，必裝插件之一?？此茖懛]有任何問題。編譯后的結果那么這樣就沒有問題了。 PostCSS常用插件介紹 繼上一次PostCSS學習指南（一）后，漸漸開始在項目中應用。 這次決定主要講解一些個人認為非常有幫助的PostCSS插件。 本期主要介紹以下幾個插件和幾個坑 autoprefixer postcss-partial-import...

    lcodecorex 評論0 收藏0

  • 【EOS】番外篇一、在win10下開發遇到坑

    摘要：一坑非常吃硬件，版本最低的硬件內存也是需要。之前進行環境開發，裝的是虛擬機，但是虛擬機最高支持的內存是目前我的電腦是這樣。三坑幸虧公司有多余的機器，讓我來裝一下系統。常見的盤啟動制作，沒有制作的，只能制作，很致命。 一、坑1 EOS非常吃硬件，v1.5版本最低的硬件內存也是需要7G。之前進行ubuntu環境開發，裝的是虛擬機VMware Workstation Pro，但是虛擬機最高支...

    wendux 評論0 收藏0

  • 番外篇1：在Windows環境下安裝JDK

    摘要：在中怎么安裝編者的電腦為位，因此以為例向大家展示的安裝過程。第三步設置環境變量一般安裝完成后，都會進行環境變量設置，目的是讓系統能夠找到和命令。生命不止，學習不休加油 他山之石，可以攻玉！歡迎關注我的微信公眾號showImg(https://segmentfault.com/img/bVboaBO?w=129&h=129); 本文作為構建第一個Java程序的番外篇一，跟大家探討下在Wi...

    vboy1010 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<