autoprefixer插件的使用踩坑

这个插件主要配合打包自动添加css浏览器兼容前缀，比如-webkit-、-ms-等。官网：https://github.com/postcss/autoprefixer

这是PostCSS的插件，根据官网，配置参数有两种方式

• 引用的时候作为参数传递
• 在.browserslistrc文件或者package.json的browserslist属性中配置【推荐，可以和babel-preset-env and Stylelint等工具公用这个配置】。browserslist配置可以查看:https://www.npmjs.com/package/browserslist

没有特殊要求用defaults配置即可。本人的基础配置如下

// package.json
{
  "browserslist": [
    "last 2 version",
    "> 0.2%",
    "maintained node versions",
    "not dead"
  ]
}

 

坑1：国内浏览器占比和全球的完全不同

上面的“> 0.2%”从理论上来说已经覆盖了绝大部分浏览器。但是中国的浏览器占比和全球的完全不同，在中国IE各个版本还有一大堆。

按上面的配置，css代码

.view-container {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

转换结果没有任何变化。

期望的是能够兼容到ie10+和低版本的chrome的兼容写法。解决办法有多种。

1.配置加上中国的特有浏览器比例

【推荐，这样能覆盖到中国和世界的绝大多数浏览器】

// package.json
{
  "browserslist": [
    "last 2 version",
    "> 0.2%",
    "maintained node versions",
    "not dead",
    "> 0.2% in CN"
  ]
}

上面的css编译后结果为

.view-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

 

2.设置要支持的浏览器的版本

比如

// package.json
{
  "browserslist": [
    "last 2 version",
    "> 0.2%",
    "maintained node versions",
    "not dead",
    "iOS >= 7",
    "Android >= 4.1",
    "IE >= 10"
  ]
}

上面的css编译结果为

.view-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

根据自己的实际情况配置即可