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 }

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了解一下！