成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

PostCSS自學(xué)筆記（二）【番外篇一】

Harpsichord1207 / 2303人閱讀

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

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

上一期有提到結(jié)合postcss-px2rem插件來處理移動端適配的方案，以及相關(guān)的避坑方法，之后總覺得這個解決方案問題太多，也就誕生了另一套方案運用postcss-pxtorem插件來進行處理。

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

題外話，其實我也很好奇，為什么postcss-px2rem沒有被收錄在PostCSS插件列表中，難道是因為收錄者認(rèn)為postcss-pxtorem可以取代它？不過兩者各有利弊，就看開發(fā)者的喜好了。

因為之前關(guān)于postcss-px2rem使用方法和可能存在的問題說的太多了，這次主要介紹postcss-pxtorem（截至2017年8月30日，我試過查找關(guān)于該插件的中文資料，完全沒有）的基本功能和個人使用一些感受。

首先，我們用這個插件為了就是要rem統(tǒng)治世界。然而，有些場景并不合適，比如1px邊框問題，我們希望并不轉(zhuǎn)換這個邊框。（以前都說文字大小不建議轉(zhuǎn)換rem，我實在找不到有力證據(jù)在當(dāng)前前端開發(fā)環(huán)境下保留字體大小的px值，因此此處不做處理）

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

postcss-px2rem通過注釋解決。

postcss-pxtorem通過配置規(guī)則和單位使用Px或PX來解決。

另外，這兩個插件各有什么優(yōu)勢呢？

postcss-px2rem可以生成根據(jù)dpr值不同的多個選擇器，官方主要用它來做字體大小的適配。以及多個版本的css文件。

postcss-pxtorem則有強大的轉(zhuǎn)換規(guī)則來適應(yīng)不同的場景，下文將進行詳細(xì)介紹。

因此個人現(xiàn)在傾向于使用postcss-pxtorem，至于是否有坑，還有待考究。接下來，開始介紹以下postcss-pxtorem的使用方法。

采用postcss-pxtorem避免了postcss-nested注釋問題,具體配置大致如下

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

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

rootValue為75，說是對根元素大小進行設(shè)置?？赡茴愃苝x2rem中的remUnit參數(shù)吧

unitPrecision為5，起初我真不知道這個官方說的The decimal numbers to allow the REM units to grow to.是啥意思，搞了半天才觀察出來，原來是轉(zhuǎn)換成rem后保留的小數(shù)點位數(shù)。。。

propList是一個存儲哪些將被轉(zhuǎn)換的屬性列表，這里設(shè)置為["*"]全部，假設(shè)需要僅對邊框進行設(shè)置，可以寫["*", "!border*"]意思是排除帶有border的屬性，當(dāng)然這里會有一個問題，也許有時候不想對border其他樣式處理例如border-radius所以也不是很好。

selectorBlackList則是一個對css選擇器進行過濾的數(shù)組，比如你設(shè)置為["fs"]，那例如fs-xl類名，里面有關(guān)px的樣式將不被轉(zhuǎn)換，這里也支持正則寫法。

minPixelValue是一個非常不錯的選項，我設(shè)置了12，意思是所有小于12px的樣式都不被轉(zhuǎn)換，那么border之類的屬性自然會保留px值了。而剛才提到的border-radius如果為了創(chuàng)造圓形等特殊較大圓弧時則還是會轉(zhuǎn)換成rem，來配合對應(yīng)的width和height（當(dāng)然，你也可以用繼承width或者h(yuǎn)eight的變量來設(shè)置radius）。

需要注意的是，以下情況并不會保留為px！


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


根據(jù)反復(fù)測試，calc運算是來自cssnano插件，然而cssnano有必要放在最后執(zhí)行，所以無法滿足計算后的10px在進行pxtorem轉(zhuǎn)換，不過這種情況也是比較合理的。假設(shè)width和height轉(zhuǎn)換為rem，而圓角是px，個人感覺不可避免的會造成圓形錯誤的情況（是否有可能改圓角px值實際上永遠(yuǎn)大于轉(zhuǎn)換后的rem的50%？有待考究?。赃@種情況暫時就不考慮了，讓其單位均保持一致即可。

寫到這里我又陷入了沉思，因為有個問題不明白了。根據(jù)postcss.config.js配置cssnano是在最后面，pxtorem是在其前面，那么如何做到對此段樣式轉(zhuǎn)換的順序。

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

另一方面，關(guān)于此段CSS在畫圓上有一些需要注意的，其實這里如果寫圓用50%即可，我發(fā)現(xiàn)某些情況下（可能是圓形很?。┤绻凑粘?的寫法轉(zhuǎn)換成rem似乎不圓，所以在現(xiàn)代開發(fā)來看移動端畫圓就50%了！所以上例僅做測試好了~

額外閱讀，關(guān)于border-radius的一些事項。

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

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

其他

關(guān)于我個人的PostCSS一系列學(xué)習(xí), 介紹及總結(jié), 有興趣可以參閱:

PostCSS自學(xué)筆記（一）【安裝使用篇】

PostCSS自學(xué)筆記（二）【插件篇】

PostCSS自學(xué)筆記（二）【番外篇一】

PostCSS自學(xué)筆記（二）【番外篇二】

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112494.html

相關(guān)文章

  • PostCSS自學(xué)筆記（二）【番外篇二】

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

    FleyX 評論0 收藏0

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

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

    jsummer 評論0 收藏0

  • PostCSS自學(xué)筆記（二）【插件篇】

    摘要：本期主要介紹以下幾個插件和幾個坑和坑這個就不用多說了，必裝插件之一。看似寫法沒有任何問題。編譯后的結(jié)果那么這樣就沒有問題了。 PostCSS常用插件介紹 繼上一次PostCSS學(xué)習(xí)指南（一）后，漸漸開始在項目中應(yīng)用。 這次決定主要講解一些個人認(rèn)為非常有幫助的PostCSS插件。 本期主要介紹以下幾個插件和幾個坑 autoprefixer postcss-partial-import...

    lcodecorex 評論0 收藏0

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

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

    wendux 評論0 收藏0

  • 番外篇1：在Windows環(huán)境下安裝JDK

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

    vboy1010 評論0 收藏0

發(fā)表評論

0條評論

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