和我一塊兒使用postcss+gulp進行vw單位的移動端的適配

隨着iphoneX的出現，新的一輪適配大法應該又出現了吧？不管是使用flex佈局或者媒體查詢，好似都不能徹底解決新加的劉海帶來的適配問題。
可是有一個單位vw就神奇的解決了這個問題。vw和vh是相對於視口（viewport）的寬度和高度 ，1vw等於視口寬度（viewport width）的百分之一，也就是說100vw就是視口的寬度；
1vh等於視口高度（viewport height）的百分之一。作移動端適配的時候，試想一想，也就是將手機的視口進行高密度的細分，隨着屏幕的改變，1vw所表明的視口大小也改變，不是能夠解決隨着屏幕
改變字體隨着改變的問題了嘛？
如何使用vw這個單位呢？咱們能夠經過px單位進行轉換呀！
以前作過一個項目要求徹底適配全部移動端，這個時候，flex佈局大法是解決不了全部手機的問題的。惟有vw出馬，纔可以一個頂兩。
我寫頁面直接使用的就是px單位，給你們看看它在瀏覽器中轉換的的值吧~雖然單位使用的是px，在瀏覽器中轉換的倒是vw。

在px轉換成vw的過程當中，什麼是最大的功臣呢？固然就是咱們的postcss啦！
postcss是強大的css預處理工具，有興趣的童鞋，建議大家看看《深刻postcssweb設計》，這本書裏面對postcss進行了詳細的講解。
我寫css老是喜歡寫飛快，基本上是不動腦筋那就是最好的了，因此呀，不論怎麼樣，我第一件事情，就是要集成SCSS的呀。
接下來祭出我使用的postcss與gulp結合使用vw適配移動端的方法吧。

個人這個裏面仍是有一些小坑的。
大家要記得注意踩呀。
下面是我借鑑過的博客，沒有這些博客的指引，我想，我可能不能使用postcss+gulp進行vw單位的移動端適配。
借鑑博客1https://www.jianshu.com/p/06d40d38cc06
借鑑博客2https://github.com/postcss/gulp-postcss
借鑑博客3https://segmentfault.com/a/1190000003909268
借鑑博客4http://ju.outofmemory.cn/entry/341641
借鑑博客5https://www.w3cplus.com/css/vw-for-layout.html
借鑑博客6http://hao.jobbole.com/postcss/
借鑑博客7https://segmentfault.com/a/1190000014185590
借鑑博客8https://www.w3cplus.com/css/aspect-ratio-boxes.html
借鑑博客9https://segmentfault.com/q/1010000011608582
借鑑博客10https://www.cnblogs.com/zy20160429/p/8205025.html
借鑑博客11https://blog.csdn.net/xuyunfei_2012/article/details/52847988
借鑑博客12https://blog.csdn.net/m0_37978717/article/details/73606499
借鑑博客13https://www.npmjs.com/package/gulp-sourcemaps
借鑑博客14https://www.cnblogs.com/Darren_code/p/gulp.html
借鑑博客15http://www.css88.com/archives/7317
借鑑博客16https://segmentfault.com/q/1010000012184986
借鑑博客17https://www.npmjs.com/package/gulp-cssnano
（另外，這篇博客我總結的太晚了，還有它存在不少問題的，好比沒有集成js對吧。我想將webpack也集成進去的，沒有作這個事情,
真的很是抱歉，博客並無寫的很是詳細，主要是我最近有些懨懨的。但願快快打起精神，好好加油吧）