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 }
再打开浏览器去看,发现布局大小,不管在手机还是平板都是适配的。
原文地址:https://www.cnblogs.com/lianyujie/p/9059868.html
时间: 2024-11-06 23:29:21