标签：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 }
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了解一下！
标签：sass 平板 方案 round max 网页 sas container strong
原文地址：https://www.cnblogs.com/lianyujie/p/9059868.html
