解决css3兼容各个浏览器的前缀的方案及Webstorm中使用Autoprefixer插件补充浏览器前缀

解决css3兼容各个浏览器的前缀的方案

emmet生成
用编辑器插件: 如sublime text 的  autoprefixer自动添加兼容前缀 基于nodejs 需要安装nodejs (这个效果不佳，本人测试貌似只添加-webkit-的前缀 - -)
用grunt插件 grunt-autoprefixer 参考链接：http://www.w3cplus.com/css3/autoprefixer-css-vender-prefixes.html
引入js<script src=”http://leaverou.github.com/prefixfree/prefixfree.min.js”></script>

Webstorm中使用Autoprefixer插件补充浏览器前缀

npm install grunt --save-dev
npm install autoprefixer --save-dev
npm install postcss-cli --save-dev

打开Webstorm设置，Preferences -> Tools -> External Tools ;点击新增按钮
填写具体配置
name：autoprefixer
Program:D:\mycode\driveRepertory\node_modules\.bin\postcss.cmd
Parameters:-u autoprefixer -o $FileDir$\$FileName$ $FileDir$\$FileName$
Working directory $ProjectFileDir$
配置好后，你可以在css，或sass文件中右键，就可以在右键菜单中看到External Tools – autoprefixer；

配置快捷键

配置兼容性
https://github.com/postcss/autoprefixer
https://github.com/browserslist/browserslist

参考：
https://blog.csdn.net/kongjiea/article/details/46471867