移動端大行其道，rem/em、百分比、響應式方案更是層出不窮，看見周圍的伙伴們都在對使用rem和百分比情有獨鍾，可我卻偏不愛，之所以出現如此多的方法，其目的只有一個屏幕適配。
屏幕適配顧名思義就是一張設計稿還原出的程序要適應於當下市場上各種大小屏幕不一的終端，做到寫一次各種終端大小的屏幕都能比例協調的顯示。下面我們先來看下大家耳熟能詳的幾種方案是如何去解決屏幕適配的。
-
rem/em：rem根元素字體大小單位，em元素字體大小單位。使用rem的時候我們需要在css中先為html元素設定font-size屬性，其作為整個頁面單位的元單位，這個大小要設置為多少呢？這要依據設計圖和屏幕尺寸來決定，通常我們還需要使用js來優先判斷當前要適配屏幕的大小，之后去動態的更改html中的font-size大小；而em這個單位和百分比相似，子類的大小受其父類控制，比如父類的font-size為16px，在子類中我們寫0.5em極為8px，這樣一級一級的嵌套寫下來，最后我們要做也是通過js來判斷當前要適配屏幕的尺寸，去更改最高層級上的font-size。
-
百分比：em玩膩了，換個新的玩法，而且在em使用中，如果適配器尺寸判斷位置稍有不適，頁面會出現頓閃，不適合新人玩，如果你現在要做一個撐滿全屏幕的移動網站，那么最佳的選擇方案莫過於百分比布局了。所以的尺寸都除以設計圖的總寬高給定一個百分比即可。
-
響應式：響應式是pc和移動端一站式的解決方案，通過css3的媒體查詢去判斷當前終端的屏幕尺寸來決定當下要顯示元素。
以上所有的方法都需要事先獲知適配器當下的尺寸，百分比布局雖然不需要，但是他的優勢更適合於做全屏鋪滿的網站，那有沒有一種方案是直接相對於屏幕大小而言呢？畢竟我們最終目的也是屏幕適配，答案就是本問給大家推薦的css屬性vw和vh--viewport width/height，視口的寬高，指代的是瀏覽器內部的可是區域的寬高，1vw等於視口寬度的1%，很明顯這個單位是以視口也就是屏幕大小作為評估依據的，正合我們意，我們先來看他們的支持情況。
更好的方案
市面上常見的幾種移動端布局方案，如圖2圖3所示，有最大寬度限制的和完全百分比的，vw的vh這兩種都試用，因為他以屏幕為基准，比如div寬37.5px，按照iphone6寬度375計算，37.5/375=0.1，0.1*100=10,也就是10vw，如此以來只要我們把這個div設置為10vw，那他在各種屏幕下占的比例都是一樣的，是不是很方便，大家可能會說這個和百分比布局差不多，其實不然，他們還是有細微區別的，百分比方式做全屏移動站點比較方便，要做一個如圖2所示限制寬的站點用百分比方式就不如vw來的方便，再說vw本就很方便，為和我們就不用呢？
html <div style="width:50vw;height:50px;background-color:red"> </div>
這個div在任何屏幕下始終占據了屏幕的一半。。。如圖4，5，移動端安卓和ios是主流而其都在采用webkit內核vw基本在webkit內核的瀏覽器上所向披靡，為何我們就老是去遺忘他呢？
另外還有一個常用的css屬性我們也應該使用上clac()，其是用來計算屬性寬高的，比如現在我要寫一個如下頁面，左側固定的移動站點，右側呀隨着屏幕的適配去改變，那我右側的寬度就可以寫成width:calc(100vw - 左側寬度),需要注意的是運算符號的兩邊要有一個空格，這個屬性可以很大程度的方便我們的計算，如果你的項目中既用到了百分比也用到了rem，你就直接可以把這些單位混雜到一塊計算，而不用顧慮那么多。
總結
以上是我平常用到的兩個高頻屬性，我不知道為何大家提到vw和vh的很少，即使移動端開發都不怎么提到vw和vh，其實在這里我想說他們真滴很好用。好用過上邊的任何單位，屏幕適配適配的是屏幕，而vw和vh正是指我們屏幕內視口的大小，多美好的單位你卻總是與之錯失。而且市面上基本大多數的布局就是我上文提到的這三種，有寬度限制的，全屏百分比的，還有限制某些欄目固定寬度滴。。。他們都可以用vw輕易的解決。。。