背景：写了一个h5页面，背景是一张图片，导致了，屏幕大小改变时，图片的宽高都会改变，这就使得里面根据图片定位的元素位置也需要动态的改变。如图1所示：
图1
傻瓜一样想了一大堆，后来发现其实很简单，实现思路，所有需要动态改变的属性，例如：元素的宽高，文字行高，都用单位vw来写，而这就需要每个属性都需要计算一下，于是可以用sass的混合器来为属性写一个公用的计算模块（本来想直接写一个计算函数来着，但是单位不知道怎么连接上去），代码如下：
@mixin calc-width($w){
width: $w / 750 * 100;
}
@mixin calc-height($h){
height: $h / 750 * 100;
}
.element-a{
@include calc-width(60vw);
@include calc-height(80vw);
}
由于UI图是按照750px来设计的，我们这里就用750作为计算的基数，于是在375 * 667的ip6上，元素a的宽高为30px，40px，在750 * xxx的屏幕上元素a的宽高为60px，80px。
这样就实现了页面高度随页面宽度的改变而动态改变。
网友评论