autoprefixer插件的使用踩坑

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

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

没有特殊要求用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;
}

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

 

posted @ 2020-05-27 15:21  chua1989  阅读(2171)  评论(0编辑  收藏  举报