溫故知新
目前主流的自適應(yīng)終端屏幕的方法主要分為rem布局和響應(yīng)式布局等。下面簡單介紹一下這兩種布局：
1.rem布局。rem即root em(根em),啥是em呢浸赫？就是前端的一個相對單位而已肢执，我理解的是：相對于當前對象內(nèi)的文本的font-size留搔，如未設(shè)置贴浙，這相對的是瀏覽器的默認font-size（通常為16px）砂吞。回到rem崎溃，其實也是一個相對單位蜻直，只不過它相對的是根元素的font-size，在頁面中它一般是不會改變的袁串。一般使用時概而，就是利用設(shè)計圖與實際終端屏幕寬度及對應(yīng)的字體大小的比例公式控制實際終端的根元素字體大小即rem（也不知道說清楚沒，反正我本人看得懂）,以此達到自適應(yīng)屏幕的目的囱修。
2.響應(yīng)式布局依賴媒體查詢實現(xiàn)赎瑰，主要是針對主流終端多寫幾個布局樣式，賊惡心破镰，不想多說餐曼。
切人正題
??????以上兩種方法基本能滿足咱們的開發(fā)需求，但仍然存在缺陷的鲜漩，例如rem是用時需要引入js腳本源譬，耦合js與css,且它的相對布局主要針對的是屏幕寬度，對高度適配沒啥幫助宇整。響應(yīng)式布局開發(fā)量大瓶佳，且并不能完完全全的適配。
??????現(xiàn)在介紹新的純CSS的相對單位vw,vh（推薦文章）,它們相對的是終端視口鳞青，視口（移動端你就可以當成屏幕就好啦）的寬為100vw,高為100vh霸饲。使用起來很簡單，如果你需要一個寬高各為視口一半的div臂拓，只需要在css里面這樣寫:div {width: 50vw ;height: 50vh}厚脉，是不是很方便。但是有這么以一種情況胶惰，如果一個移動端頁面某個元素按vw給寬度樣式傻工，頁面隨手機橫屏?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肖粮。
