溫故知新

目前主流的自適應(yīng)終端屏幕的方法主要分為rem布局和響應(yīng)式布局等。下面簡單介紹一下這兩種布局：
1.rem布局。rem即root em(根em),啥是em呢？就是前端的一個相對單位而已，我理解的是：相對于當(dāng)前對象內(nèi)的文本的font-size，如未設(shè)置，這相對的是瀏覽器的默認(rèn)font-size（通常為16px）?；氐絩em，其實也是一個相對單位，只不過它相對的是根元素的font-size，在頁面中它一般是不會改變的。一般使用時，就是利用設(shè)計圖與實際終端屏幕寬度及對應(yīng)的字體大小的比例公式控制實際終端的根元素字體大小即rem（也不知道說清楚沒，反正我本人看得懂）,以此達(dá)到自適應(yīng)屏幕的目的。
2.響應(yīng)式布局依賴媒體查詢實現(xiàn)，主要是針對主流終端多寫幾個布局樣式，賊惡心，不想多說。

切人正題

??????以上兩種方法基本能滿足咱們的開發(fā)需求，但仍然存在缺陷的，例如rem是用時需要引入js腳本，耦合js與css,且它的相對布局主要針對的是屏幕寬度，對高度適配沒啥幫助。響應(yīng)式布局開發(fā)量大，且并不能完完全全的適配。
??????現(xiàn)在介紹新的純CSS的相對單位vw,vh（推薦文章）,它們相對的是終端視口，視口（移動端你就可以當(dāng)成屏幕就好啦）的寬為100vw,高為100vh。使用起來很簡單，如果你需要一個寬高各為視口一半的div，只需要在css里面這樣寫:div {width: 50vw ;height: 50vh}，是不是很方便。但是有這么以一種情況，如果一個移動端頁面某個元素按vw給寬度樣式，頁面隨手機(jī)橫屏?xí)r(vm,vh的相對值已互換)希望它的大小不變呢。你可以試試vmin,vmax。vmin代表vw與vh中較小的那一個，vmax代表vm與vh中較大的那一個。
??????實際使用中可能會遇到這樣的問題，我需要一個元素寬度為一半視口寬度加上100px呢？在這里再給大家加點料，css的calc屬性，使用方法：div{width: calc(50vw + 100px)},calc能整合的單位包括但不限于px、vw、vh、%、rem。