優化auto-prefixer配置，讓CSS適配不同瀏覽器

RichardXG 發布于2019-08-21 15:03 / 3517人閱讀

摘要：最后我把我的配置修改成如下其實應該使用，不過一直沒時間學習，有空我再補上。

優化auto-prefixer配置

更新于 2017/6/8

終于克服懶惰，把post-css用上了，感覺可以拋棄stylus-loader了，哈哈，不過目前為了兼容，只修改了auto-prefixer的配置，它的文檔在這

將原有寫在loader中配置，轉移到根目錄下的postcss.config.js中，代碼如下

module.exports = {
    plugins: {
        "autoprefixer": {},
      //  "postcss-px2rem": {remUnit: 100}
    }
}

這里可以看到我沒有對autoprefixer進行任何的配置，這是因為我把相關配置寫入到了package.json文件，相關代碼如下

  "browserslist": [
    "iOS >= 8",
    "Firefox >= 20",
    "Android > 4.4"
  ]

如果非要在postcss.config.js中配置的話，請使用browsers參數來配置。

browserslist識別的瀏覽器關鍵詞如下：

Android for Android WebView.

BlackBerry or bb for Blackberry browser.

Chrome for Google Chrome.

ChromeAndroid or and_chr for Chrome for Android

Edge for Microsoft Edge.

Electron for Electron framework. It will be converted to Chrome version.

Explorer or ie for Internet Explorer.

ExplorerMobile or ie_mob for Internet Explorer Mobile.

Firefox or ff for Mozilla Firefox.

FirefoxAndroid or and_ff for Firefox for Android.

iOS or ios_saf for iOS Safari.

Opera for Opera.

OperaMini or op_mini for Opera Mini.

OperaMobile or op_mob for Opera Mobile.

QQAndroid or and_qq for QQ Browser for Android.

Safari for desktop Safari.

Samsung for Samsung Internet.

UCAndroid or and_uc for UC Browser for Android.

==================================以上為更新內容=========================

=============================以下為舊內容=================================

之前一直使用auto-prefixer-loader的默認配置，即autoprefixer-loader?browsers=last 2 version，一直沒深究為何要這么配置，直到在開發WEBAPP的項目中，使用了flex語法，結果發現編譯出來的有-ms-flex和-moz-flex，我期望的是只用-webkit-就行了，不用搞這么多，于是趕緊去官網找資料。。。

查閱了資料后發現，autoprefixer工具使用Browserslist來匹配符合條件的瀏覽器，Browserslist提供了一個網站browserl.ist來幫助我們找到期望的瀏覽器版本，上去試了試，發現搜索的關鍵字要注意下，比如如果要搜索Android Browser > 4.2實際上輸入Android > 4.2就可以了，Android Browser > 4.2反而搜不到。。。

最后我把我的auto-prefixer-loader配置修改成如下

  `autoprefixer?{browsers:["iOS >= 7","Android >= 4"]}`

其實應該使用postCSS，不過一直沒時間學習，有空我再補上。

云服務器 GPU云服務器 webrtc適配手機瀏覽器 webrtc瀏覽器適配js 不同瀏覽器 css優化

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

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

移動端布局與適配

摘要：實戰之微信錢包騰訊服務界面網格布局是讓開發人員設計一個網格并將內容放在這些網格內。對于移動端適配，不同的公司不同的團隊有不同的解決方案。柵格系統用于處理頁面多終端適配的問題。 grid實戰之微信錢包騰訊服務界面 CSS3網格布局是讓開發人員設計一個網格并將內容放在這些網格內。而不是使用浮動制作一個網格，實際上是你將一個元素聲明為一個網格容器，并把元素內容置于網格中。移動端頁面適配—...

Clect 2019-08-29 14:08 評論0 收藏0
gulp相關說明

摘要：當你按下或切換到瀏覽器，瀏覽器將會會自動刷新如果你修改的是文件將會刷新網頁如果你修改的是或，這個文件或文件將會被重載而不是刷新整個頁面這個特性在寫單頁面應用時尤為實用模板引入考慮以下情況我們需要創建如下的模板，并且在不同的頁面高亮不同的這時 1.當你按下ctrl+s 或切換到瀏覽器，瀏覽器將會會自動刷新如果你修改的是html文件將會刷新網頁如果你修改的是css或less，這個le...

fevin 2019-08-22 10:48 評論0 收藏0
【譯】使用Mobify.js讓你的圖片自動響應化

摘要：的圖像提供了該方案。使用的圖像和捕獲技術相結合我們能通過一個標簽實現圖像的自動響應化。調整元素當然不同的瀏覽器自動化調整圖片大小是可行的而自動化的確實不可能。在Web開發社區，響應式圖片已經成為最大的挫敗之一。原因也很簡單：頁面平均大小產品能從去年的1MB達到了驚人的1.5MB。其中圖片大小的增長比例就占了頁面大小增長的60%或更多，并且這個比例還在不斷攀升。絕大多數的頁面是可以...

lncwwn 2019-08-19 14:27 評論0 收藏0
從零搭建移動H5開發項目實戰

摘要：并且除了常用的端，還要考慮微信端，或者是端。所以我們要有一套機制，在端上走的代碼，在端或者微信端上走端對應的代碼。對于一個從零開始的移動端項目，我總結了以上這些移動開發難點，希望之后的人能少踩點坑，站在我的肩膀上提高項目開發的效率和質量。從零搭建移動H5開發項目實戰前端H5的前世今身在Pc的時代，前端技術無疑統治了大多數用戶的交互界面！而在移動為王的今天，NA開發在早期占領了大多...

terro 2019-08-29 11:32 評論0 收藏0