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;
}
根据自己的实际情况配置即可