還在用rem做移動端適配？最新移動端適配方案vw,vh瞭解一下！

標籤：sass   平板   方案   round   max   網頁   sas   container   strong   

vw,vh都是相對於螢幕視口的單位。

vw:相對於視口的寬度。視口被均分為100單位的vw；

vh:相對於視口的高度。視口被均分為100單位的vh；

vmax:相對於視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax；

vmin:相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin；

解釋完相關觀念，下面就來說說具體的適配方案：

一般UI給的設計稿都是採用750X1334的，因此可以使用sass來編寫一個函數：

1 $containerWidth: 750;2 $containerHeight: 1334;
3 @function vieX($px) {4 @return $px*100/$containerWidth * 1vw;5 }
6 @function vieY($px) {7 @return $px*100/$containerHeight * 1vh;8 }

函數設定好，下來就簡單了，在進行網頁布局，css大小設定的時候，設計稿上數字是多少，這裡就寫多少，比如：

1 .header {2 position: relative;3 width: vieX(750);4 height: vieY(400);5 background-image: url(../assets/self/1126215672.jpg);6 background-size: vieX(750) vieY(400);7 position: relative;8 }

再開啟瀏覽器去看，發現布局大小，不管在手機還是平板都是適配的。

 

還在用rem做移動端適配？最新移動端適配方案vw,vh瞭解一下！