还在用rem做移动端适配？最新移动端适配方案vw,vh了解一下！

Posted 2020-11-06 lianyujie

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 }

再打开浏览器去看，发现布局大小，不管在手机还是平板都是适配的。