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

優化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，不過一直沒時間學習，有空我再補上。