优化autoprefixer配置，让CSS适配不同浏览器

更新于 2017/6/8


终于克服懒惰&＃xff0c;把post-css用上了&＃xff0c;感觉可以抛弃stylus-loader了&＃xff0c;哈哈&＃xff0c;不过目前为了兼容&＃xff0c;只修改了auto-prefixer的配置&＃xff0c;它的文档在这

将原有写在loader中配置&＃xff0c;转移到根目录下的postcss.config.js中&＃xff0c;代码如下

module.exports &＃61; {plugins: {&＃39;autoprefixer&＃39;: {},// &＃39;postcss-px2rem&＃39;: {remUnit: 100}}
}

这里可以看到我没有对autoprefixer进行任何的配置&＃xff0c;这是因为我把相关配置写入到了package.json文件&＃xff0c;相关代码如下

"browserslist": ["iOS >&＃61; 8","Firefox >&＃61; 20","Android > 4.4"]

如果非要在postcss.config.js中配置的话&＃xff0c;请使用browsers参数来配置。

browserslist识别的浏览器关键词如下&＃xff1a;

• 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.

&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;以上为更新内容&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;

&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;以下为旧内容&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;&＃61;

之前一直使用auto-prefixer-loader的默认配置&＃xff0c;即autoprefixer-loader?browsers&＃61;last 2 version&＃xff0c;一直没深究为何要这么配置&＃xff0c;直到在开发WEBAPP的项目中&＃xff0c;使用了flex语法&＃xff0c;结果发现编译出来的有-ms-flex和-moz-flex&＃xff0c;我期望的是只用-webkit-就行了&＃xff0c;不用搞这么多&＃xff0c;于是赶紧去官网找资料。。。

查阅了资料后发现&＃xff0c;autoprefixer工具使用Browserslist来匹配符合条件的浏览器&＃xff0c;Browserslist提供了一个网站browserl.ist来帮助我们找到期望的浏览器版本&＃xff0c;上去试了试&＃xff0c;发现搜索的关键字要注意下&＃xff0c;比如如果要搜索Android Browser > 4.2实际上输入Android > 4.2就可以了&＃xff0c;Android Browser > 4.2反而搜不到。。。

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

&＃96;autoprefixer?{browsers:["iOS >&＃61; 7","Android >&＃61; 4"]}&＃96;


其实应该使用postCSS&＃xff0c;不过一直没时间学习&＃xff0c;有空我再补上。