0%

前端的兼容解决方案


兼容一直都是前端比较重视的问题,今天主要是记录一下自己的学习过程

兼容性我用的是Autoprefixer这个插件,Autoprefixer是一个后处理程序,你可以同Sass,Stylus或LESS等预处理器共通使用。它适用于普通的CSS,而你无需关心要为哪些浏览器加前缀,只需使用W3C最新的规范关注于实现。

我的IDE用的是HBuilder 一款适合新手的Html5开发环境,接下来说一下怎么将Autoprefixer 装在HBuilder中

配置autoprefixer

首先在命令行中输入 npm install autoprefixer -g

Autoprefixer其实是postcss的插件 ,所以也要安装postcss-cli
npm install postcss-cli -g

打开HBuilder,运行-外部工具-外部工具配置

名称填写 autoprefixer(这个随意)

要执行的命令或文件填写npm安装目录 D:\Program Files\nodejs\node_global\postcss.cmd 这个目录是看自己安装在哪里

工作目录填写 ${project_loc}

参数填写 -u autoprefixer -o ${resource_loc} ${resource_loc}

配置完后应用,运行。

使用autoprefixer

点击你的css、sass文件,然后右键,依次点击外部工具-autoprefixer(此处为你新建外部工具的名称)等待编译,编译完毕即可

创建快捷方式

工具-选项-常规-快捷键,搜索autoprefixer(此处为你新建外部工具的名称),设置快捷键即可

好了,以上就是我对兼容性解决的一些理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。

-------------本文结束感谢您的阅读-------------
没办法,总要恰饭的嘛~~