优化auto-prefixer设置，让CSS适配差别浏览器

2024年4月22日 165次阅读 来源: Larry_

优化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，不过一向没时间进修，有空我再补上。

    原文作者：Larry_
    原文地址: https://segmentfault.com/a/1190000008030425
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞