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;
}

根據自己的實際情況配置即可