sublime加动画css3,Sublime CSS3兼容前缀自动补全autoprefixer插件安装方法

提示：autoprefixer插件需要node.js的支持，所有使用前需要先安装node.js，安装方法请看：Sublime安装Nodejs的方法和环境配置 —— Windows系统

步骤2：打开sublime ，选择菜单 Preferences > Browse Packages 将下载的压缩包解压到这里

步骤3：设置快捷键：选择菜单Preferences > Key Bindings – User，可自定义，也可直接ctrl+shift+p选择autoprefixer(如下图)[

{ "keys": ["ctrl+alt+p"], "command": "autoprefixer" }

]

步骤4：设置成功，在css里面写transition:all 2s,会自动编译成 -webkit-transition:all 2s;transition:all 2s；

问题来了，为什么只有-webkit-的前缀呢？其他-moz-，-ms-的前缀呢？

原来sublime的插件autoprefixer默认是没有兼容IE、firefox和opera的，我们可以继续下面的步骤

步骤5：选择菜单：Preferences > Package Settings > Autoprefixer > Settings - User

步骤6：为浏览最新版本添加前缀，市场份额大于0.1%，美国份额>5%，ie6-ie8，火狐版本20以下(其他写法看下面表格){

"browsers": ["last 2 version", "> 0.1%", "> 5% in US", "ie 6-8","Firefox 

}

OK，再来看下效果.b{

transform:scale(1.1);

}

编译后.b{

-webkit-transform:scale(1.1);

-moz-transform:scale(1.1);

-ms-transform:scale(1.1);

transform:scale(1.1);

}

写法解释

last 2 versions每一个主要浏览器的最后2个版本

last 2 Chrome versions谷歌浏览器的最后两个版本

> 5%市场占有量大于5%

> 5% in US美国市场占有量大于5%

ie 6-8ie浏览器6-8

Firefox > 20火狐版本>20

Firefox >= 20火狐版本>=20

Firefox < 20火狐<20

Firefox <= 20火狐<=20

iOS 7指定IOS 7浏览器

至此就完工了，小米希望可以帮助到各位，如果成功了别忘了点个赞哦。。谢谢

更多写法请参考：https://github.com/ai/browserslist#queries