html中怎么消除排序的前缀,北京web前端培训-解决css3前缀问题的插件-Autoprefixer...

我们在前端开发中，经常会遇到一些属性需要添加前缀属性，比如-webkit-transform: auto; 或者displsy：-webkit-flex; 这些需要添加前缀的属性多且难记，很容易就会在上面出现错误，给我们增加不必要的调试，浪费我们的时间。今天我就为大家介绍一个能解决这个问题的插件-Autoprefixer

Autoprefixer是一款基于postcss的插件，他能检测你写出的css属性并且判断他是否是需要添加前缀的属性，如果是就会自动为该属性添加前缀。让我们来看一下效果吧

div{

flex;

}

这是Autoprefixer处理之前的css代码

div{

display: -webkit-box;

display: -ms-flexbox;

display: flex;

}

这是Autoprefixer处理之后的css代码

他能自动位代码添加浏览器前缀属性，这大大简化了我们的开发工作，这也是我今天向大家推荐这款插件的原因

不过这个插件安装起来有点复杂，在这里介绍一下流程

它是基于node.js运行的，所以你需要先安装node.js。你可以在node.js的官网下载到它的安装包，你也可以使用别的安装方。

然后是npm，npm是nodejs官为nodejs定制的一个工具，是Node.js的包管理器，通过npm可以下载安装nodejs的模块包。如果你下载的是版本较高的node.js，那么包里很可能已经集成了npm，不需要你自行安装，在cmd命令行中输入 npm -v 如果反馈是 4.0.2 之类的版本号那么你就不需要安装，否则请安装npm，npm的安装方法百度有很多，就不在这介绍了

之后就是Autoprefixer了，在cmd命令行中输入 npm install autoprefixer -g mac下可能需要加sudo，这个原生载点在国外，速度可能会很慢，如果实在无法安装可以用国内的镜像载点，方法就是把命令中的npm改成cnpm，这是等程序运行完就完成了。你可能觉得这太简单了，但安装过程就是这样的

后是postcss，Autoprefixer其实是postcss的插件，在cmd命令行中输入 npm install postcss-cli -g 来进行安装，同样可以使用国内镜像载点

全部安装好了之后，我们就可以在自己的编辑工具中配置Autoprefixer了

我自己用的是HBuilder，就就讲讲在HBuilder中配置Autoprefixer的方法吧

打开HBuilder进入主界面，点击运行-外部工具-外部工具配置，然后新建一个外部工具，配置如下

第二行要执行的命令或文件的路径可能根据各位的系统版本有所差异，请自己纠正，主要就是找到postcss.cmd这个文件

配置完成之后就可以使用了，右键选择外部工具使用还是自己设置快捷键都可以，使用后需要一点时间处理，视代码长度大概两秒到十余秒吧

以上就是对Autoprefixer的介绍了，希望对各位有用

html中怎么消除排序的前缀,北京web前端培训-解决css3前缀问题的插件-Autoprefixer...相关推荐

北京web前端培训多少钱？好程序员前端培训费用是多少？
最近小源看到很多文章在说:北京怎么选择web前端培训机构?北京web前端的培训费用多少?等等......那么在北京这样的一线城市,想报班学习前端费用需要多少?你一定要知道,北京是全政治中南关系,文化中 ...
北京web前端培训学校，怎么学才不迷失方向
有人说:明明现在吃蔬菜.吃水果为什么还是这体重,那索性我不计较了:结果一周内胖了好几斤. 有人说:现在我每天练习说英语,都3个月了看到外教还是是发抖不敢说话,于是放弃:结果现在说之前日常用的高频单词都 ...
北京web前端培训，三大框架去选哪个好
大家都知道,前端入门三件套:HTML.CSS.JS,但是迈过这个基础阶段,在以后实际工作中常常需要用到web前端框架,因为不可能每个项目都从头开始码代码,一个好的框架可以帮你节省很多力气,也有利于后期 ...
北京web前端培训哪里好，从0开始打造个人网站
很多人只听说web前端很简单很好学,却不知道学出来能干什么,你知道吗,web前端也是能干很多有意思的东西的,比如建一个自己的网站,比如建一个小程序,这次来说说前端人的标配,如何从零开始打造自己的个人网 ...
web前端培训：CSS中单行文本溢出显示省略号的方法
CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中,这个问题其实是属于老生常谈了,因为css单行文本的应用是非常频繁的,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没 ...
props写法_好程序员web前端培训React中事件的写法总结
好程序员web前端培训React中事件的写法总结,React的事件处理和DOM元素很相似,但是语法上是有不同的: 1.react事件采用驼峰命名法,而不是纯小写. 驼峰命名法(camelCase):命 ...
前端改变div排序_转行学习web前端开发，需要哪些工具和需要学习什么？
今天我们来谈谈Web和前端开发过程中需要学习什么?前端开发需要使用什么开发工具?也简单介绍前端开发前景和薪水. 前端工程师的主要职责: 前端工程师在不同的公司有不同的功能,但性质相似. 1.网站设计与 ...
web前端培训分享：使用Dplayer实现Vue3中的视频及弹幕播放
Dplayer是一款上手简单,功能强大的HTML5视频播放器,我们可以使用它,快速在普通HTML.Vue.React中实现视频播放的功能需求.Dplayer同时也提供了目前各大视频站都在使用的弹幕功能 ...
将chart放入panel中出现滚动条_聊天场景在web前端开发中的体验与优化
在日常工作中,如下图的聊天场景是不是很熟悉,没错就是我们再熟悉不过的 QQ 和微信,一个正常的聊天界面大致上是长这个样子的: 这种聊天窗口的消息流有两个明显的特点: 最新的消息和滚动条初始位置需要在列 ...

html中怎么消除排序的前缀,北京web前端培训-解决css3前缀问题的插件-Autoprefixer...

html中怎么消除排序的前缀,北京web前端培训-解决css3前缀问题的插件-Autoprefixer...相关推荐

最新文章

热门文章