騷年，放飛自我吧急灭！放心使用 vw 來做適配～
移動端h5 vw 適配姐浮，基于webpack4 打包多頁面html demo、支持es6葬馋，開箱即用卖鲤。
適合小白哈肾扰，大佬看到點完小星星?再繞路～小白也別忘記了點個星星！謝謝～
1蛋逾、在這里很多人有疑問集晚，為什么要用vw 單位來做適配？vw 和 我們常用rem適配方案有什么優(yōu)缺點区匣？
我相信大家對vw 和 rem 單位不會陌生偷拔。
vw、vh亏钩、vmin莲绰、vmax 這四個單位都是相對于視口的寬度。視口被均分為100單位的vw ：
vw姑丑、vh vw是相對視口（viewport）的寬度而定的蛤签，長度等于視口寬度的1/100。 假如瀏覽器的寬度為200px彻坛，那么1vw就等于2px（200px/100）涉茧。
vh是相對視口（viewport）的高度而定的，長度等于視口高度的1/100孽糖。 假如瀏覽器的高度為500px福扬，那么1vh就等于5px（500px/100）。
vmin和vmax是相對于視口的高度和寬度兩者之間的最小值或最大值间驮。
如果瀏覽器的高為300px躬厌、寬為500px，那么1vmin就是3px竞帽，1vmax就是5px扛施。 如果瀏覽器的高為800px，寬為1080px屹篓，那么1vmin也是8px疙渣，1vmax也是10.8px。
彈性布局通常指的是rem或em布局堆巧，rem是相對于html元素的font-size大小而言的妄荔，而em是相對于其父元素（非font-size的是相對于自身的font-size）。 10px == 62.5%
html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
不管vw 還是rem 都是非常不錯的一個長度單位谍肤，rem 適配的代表Flexible.js 方案啦租，被絕大部分公司引用，2013年那時荒揣，移動端興起篷角，需要適配多端。
當時rem 和 vw 兩個選擇系任？ vw 在當時的條件下不夠成熟用來做適配的方案恳蹲，因為那時候的廠商對vw 的適配支持率低虐块、兼容性差。但是現(xiàn)在對移動端來說阱缓，大部分都已經(jīng)支持vw的適配了非凌，具體兼容的數(shù)據(jù)，可以看 =>2
rem 的彈性布局荆针，在當時無疑成了不二的選擇敞嗡，兼容性好，不過有些小問題航背，都能hack喉悴，flexible可以說是一個非常優(yōu)秀的方案，也承載了一段時期的適配使命玖媚。大家有時間可以翻翻flexible 的源碼箕肃，通過js 動態(tài)改變根節(jié)點，來使rem 單位達到適配多端的效果今魔。
rem 是根據(jù)各種規(guī)則計算一個寬度勺像，然后把根元素的字體尺寸設(shè)置成這個寬度，然后使用rem設(shè)置各種子元素的寬度错森。其實最終rem 也是在模擬 vw ,那在現(xiàn)在大部分廠商都支持vw 吟宦，并且也有降級處理方案可以hack，我們何不直接用vw 呢涩维，相信未來會有越來越多的廠商完善支持vw殃姓。
包括flexible 團隊也建議大家可以放棄使用這個過渡的方案，可以采用vw 來解決適配問題瓦阐。
2蜗侈、現(xiàn)在對vw 的兼容性支持情況？
在移動端 iOS 8 以上睡蟋、 Android 4.4 以上踏幻、包括微信瀏覽器 新版x5 都支持vw。
可以在 Can I use 或者 css3test 查看兼容情況
想要適配低版本瀏覽器戳杀、低端機型也不是什么問題叫倍、也給出了解決方案。請看 => 3
在幾年前vw 之所以沒有流行起來的原因豺瘤，還是因為在當時兼容性不夠，講白了听诸，就是坑多坐求、大家都不愿意做第一個躺坑的人。
幾年時間過去晌梨，各大廠商對vw 對兼容升級桥嗤、低端機型占比逐步減少须妻，vw 的適配方案也慢慢的浮出了水面，大家重新對它有了新的認識泛领。包括我們業(yè)界知名的大漠荒吏，他們在手淘已經(jīng)對vw 適配方案有了一年多的實踐時間。
3渊鞋、不支持vw 的瀏覽器的解決方案绰更？
低版本瀏覽器、低端機型不支持的情況下锡宋，我們可以hack 儡湾，在部分瀏覽器上不顯示圖片，可以加上全局解決 img {content: normal !important} https://github.com/rodneyrehm/viewport-units-buggyfill 項目中引用
? window.onload=function() {window.viewportUnitsBuggyfill.init({hacks:window.viewportUnitsBuggyfillHacks? });? }
github 歡迎小星星 請點擊： vw 適配 github 地址
如果你已經(jīng)裝了git 的話执俩，可以走以下步驟徐钠。
git clone https://github.com/caoxiaoke/html-vw-layout.git
cd html-vw-layout
執(zhí)行步驟：npm install 或者 sudo npm install
開發(fā)環(huán)境 npm run start || 開發(fā)環(huán)境 http://localhost:8080 查看效果
生產(chǎn)打包 npm run build
如果你不使用react 也不使用vue ，在項目中只使用html頁面 vw實現(xiàn)移動端適配役首，請點這 《如何在html項目中使用vw實現(xiàn)移動端適配》
在react項目中使用vw實現(xiàn)移動端適配 請參考?《如何在react項目中使用vw實現(xiàn)移動端適配》?
###Demo
Galaxy Note 3
https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/Galaxy%20Note%203.png
Galaxy S5
https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/Galaxy%20S5.png
Nexus 7 https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/Nexus%207.png
iPad Pro
https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/iPad%20Pro.png
iPad
https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/iPad.png
iPhone 5_SE
https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/iPhone%205_SE.png
iPhone 6_7_8 Plus
https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/iPhone%206_7_8%20Plus.png
iPhone 6_7_8
https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/iPhone%206_7_8.png
iPhone X
https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/iPhone%20X.png
華為P10 PLUS 1440_2560
華為P20
https://github.com/caoxiaoke/html-vw-layout/blob/master/src/images/%E5%8D%8E%E4%B8%BAP20.png
iPhone 6_7_8
