优化auto-prefixer配置，让CSS适配不同浏览器

RichardXG 发布于2019-08-21 15:03 / 3409人阅读

摘要：最后我把我的配置修改成如下其实应该使用，不过一直没时间学习，有空我再补上。

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

云服务器专线服务 webrtc适配手机浏览器 webrtc浏览器适配js 不同浏览器 css优化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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