在前端开发中,为了使页面能够在主流浏览器上显示,部分css属性就需要添加不同的兼容前缀,例如:
-moz-
:Firefox,GEcko引擎
-webkit-
: Safari和Chrome,Webkit引擎
-o-
:Opera(早期),Presto引擎,后改为Webkit引擎
-ms-
:Internet Explorer,Trident引擎
为了避免遗漏和减少工作量,可以安装Autoprefixer
插件,自动补全css的前缀。适用于css、less、scss。
一、安装步骤
1.在扩展里搜索Autoprefixer
,点击安装
2.配置
设置-搜索Autoprefixer 选择在settings.json中编辑
在autoprefixer.options
里添加如下代码:
"autoprefixer.options": {
"browsers": [
"ie >= 6",
"firefox >= 8",
"chrome >= 24",
"Opera >= 10",
"last 2 versions",
"> 5%"
]
}
配置参数:
"ie >= 6"
:IE浏览器版本大于等于6
" >5%"
:全球超过5%人使用的浏览器
“last 2 versions”
: 所有浏览器兼容到最后两个版本
注意:在处理兼容IE浏览器时,要注意IE浏览器较低版本本身就不支持的属性,即使进行兼容处理也不能应用。
3、使用方法:在需要处理的css文件里按ctrl+shift+p,选择Autoprefixer:Run选项
效果如下:
//使用前
.container {
display: block;
flex-direction: row;
justify-content: center;
}
//使用后
.container {
display: block;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
如果对你有所帮助,请记得一键三联哦