我們在處理網頁的時候，往往會遇到兼容性的問題。在這個問題上分為兩個大的方向：屏幕自適應&瀏覽器兼容。而屏幕自使用的方法有許多，包括框架之類的，但是瀏覽器的兼容卻沒有一個號的框架。在我們日常處理中，會使用屬性兼容（*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:
