自动补全css兼容前缀 Vscode插件 - Autoprefixer(3.0.1版本)

在前端开发中，为了使页面能够在主流浏览器上显示，部分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;
}

如果对你有所帮助，请记得一键三联哦