我们在处理网页的时候，往往会遇到兼容性的问题。在这个问题上分为两个大的方向：屏幕自适应&浏览器兼容。而屏幕自使用的方法有许多，包括框架之类的，但是浏览器的兼容却没有一个号的框架。在我们日常处理中，会使用属性兼容(*background,_background...),前缀兼容(-webkot-,-oz-,-o-...)以及注释兼容([if it ie...])。方法啊很多，但是我们却要挨个去加这些属性，难免会拖慢我们的效率。这样的情况下，PostCSS应运而生。那开始我们的学习之旅吧：
一：准备工作：
要想用PostCSS，需要你的电脑上确保安装了npm,node,gulp,
首先新建一个文件夹，我取名为Postcss1，在文件目录下新建一个package.json(用来保存安装插件信息)，gulpfle.js(用来编写命令)，dest文件(用来存放处理后的css文件)以及src文件(用来存放原始css文件)，如下图：
二：gulp以及postcss相关插件的安装的安装
打开你的命令符小黑窗(window+R)，输入CMD，然后到你的根目录下，如下图：
然后我们输入npm install gulp --save-dev,此步骤为gulp的安装；
安装成功以后，在package.json里面会出现这样的安装信息：
在根目录下会出现node_modules的文件目录
嗯，恭喜你啊，小伙子。你安装成功了，然后我们再安装postcss以及相关的插件，
继续在命令行里输入：npm install postcss autoprefixer cssnext precss --save-dev
安装成功，在package.json里面的信息会变成：
相关插件已经安装成功；接下来进行第三步：
三：进行gulpfle.js的配置：
在js文件中，我们首先创建相关的变量：
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
var precss = require('precss');
我们现在可以设置一个任务，让PostCSS读取CSS原文件并且处理它：
gulp.task('css', function () {
var processors = [autoprefixer, cssnext, precss];
return gulp.src('./src/*.css').pipe(postcss(processors)).pipe(gulp.dest('./dest'));
});
我们一起来看一下上面的代码。在第一行，设置了一个任务名叫css。这个任务将会执行一个函数，同时在这个函数中创建了一个名为processors的数组。将上面创建的变量添加到数组当中，这里将插入我们想使用的PostCSS插件。
在processors数组后面，我们指定了需要处理的目标文件，即src目录中的任何CSS文件。
这里面使用了两个.pipe()函数，设置postcss()执行PostCSS，并且给postcss()传递processors参数，后面会告诉PostCSS要使用哪个插件。
接下来的第二个.pipe()函数，指定结过PostCSS处理后的CSS放置在dest文件夹中。
然后我们需要一个检测的函数，当原始文件改变时，处理文件也跟着发生相关的改变，代码如下：
gulp.task('watch', function () {
gulp.watch('./src/*.css', ['css']);
});
gulp.task('default', ['watch', 'css']);
四：运行：
我们只需要在命令行里输入gulp css即可运行：
src文件下的css：
执行命令行dest下面的css:
IE-“无法浏览网页” 教你十招解决疑难杂症
“无法浏览网页” 教你十招解决疑难杂症 相信大家也有遇到过像IE不能上网浏览的问题.下面就来给大家介绍一下常见原因和解决方法: 一.网络设置的问题 这种原因比较多出现在需要手动指定IP.网关.DNS服 ...
IE内嵌google chrome frame解决浏览器兼容问题
IE内嵌google chrome frame解决浏览器兼容问题 http://www.cnblogs.com/xwdreamer/archive/2013/12/17/3477776.html 参 ...
第四节：教你如何快速让浏览器兼容ES6特性
写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6的兼容性如何,如何在浏览器兼容ES6的特性,这节前端君会介绍一个抱砖引玉的操作案例. 为什么ES6会有兼容性问题? 由于广大用 ...
js复制当前url地址解决浏览器兼容
1.网上搜索的js复制链接代码,好像只能支持ie浏览器,其他浏览器不支持, 案例: var url=12; if(window.clipboardData){ wi ...
教你如何快速让浏览器兼容es6
写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6的兼容性如何,如何在浏览器兼容ES6的特性,这节会介绍一个抱砖引玉的操作案例. 为什么ES6会有兼容性问题? 由于广大用户使用 ...
解决浏览器兼容ES6特性
为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...
【转】使用Chrome Frame，彻底解决浏览器兼容问题
本文转自http://www.ryanbay.com/?p=269,感谢该作者的总结 X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的. 通过在meta中设置 ...
vue cli创建的项目 当你后期使用了ES6语法，如何解决浏览器兼容问题
最近开发了一个项目,开发过程中,由于需要使用了async await ,于是发现,只有少数的浏览器支持,极大多数的浏览器是不支持这玩意的,在网上各种找解决方案,基本都是失败,最后总结了两个方案之后,尝 ...
在不同的浏览器使用不同的css样式,解决浏览器兼容问题
区别IE6与FF: background:orange; *background:blue; 区别IE6与IE7: background:green !import ...
随机推荐
MVC思想
MVC英文即Model-View-Controller,即把一个应用的输入.处理.输出流程按照Model.View.Controller的方式进行分离,这样一个应用被分成三个层--模型层.视图层.控制 ...
Dapper学习笔记(2)-链接引用
在研究Dapper源码时发现Dapper NET45类库中的SqlMapper.cs文件前面有个蓝色的箭头图标,发现在Dapper NET45文件夹下根本不存在SqlMapper.cs文件,其文件属性 ...
Android搭建junit测环境
在AndroidManifest.xml文件中增加两个东西,分别是: 1.uses-library ,位于application里面. 2.instrumentation,与application同级 ...
C语言中的 extern 关键字
今天在 BLE 中看到很多 extern 关键字,现在总结一下: extern 关键字主要用于在一个c文件中要用到另一个c文件中的变量或者函数. example: #extern_base.c ; # ...
使用ExposedObject对Asp.net MVC中匿名类型的JsonResult做单元测试
返回JsonResult是MVC中的常见返回值类型,而且简单方便的方式是结合匿名类型一起使用. 比如: public ActionResult PreviewEmail() { …… return J ...
css学习之color: window和color: currentColor
一.易被忽略的属性 color: currentColor color: window 看完之后感觉眼前一亮,有的我之前根本没有用过,甚至都不知道有color: currentColor这么个东西 ...
比较和排序 IComparable And IComparer
1.List默认排序 为类创建默认排序实现IComparable,此代码的实现为年龄升序 using System; using System.Collections.G ...
jQuery克隆DOM节点
jQuery克隆DOM节点
JAVA_SE基础——52.匿名内部类
电信的电箱烧了,害我断了2天网,真拿命,耽误了 Java匿名内部类的总结: 没有名字的内部类.就是内部类的简化形式.一般只用一次就可以用这种形式.匿名内部类其实就是一个匿名子类对象.想要定义匿名内部类 ...
linux启动jmeter(二十三)，执行./jmeter.sh报错解决方法(转载)
转载自 http://www.cnblogs.com/yangxia-test 1.l-bash: ./jmeter.sh: Permission denied解决办法:jmeter.sh的执行权限改 ...
2840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
