移动Web开发基础-比例盒子

前言

上篇在移动Web开发基础-百分比+flex布局方案中说到了比例盒子的实现，因为在移动端，需要适应各种屏幕宽度的设备，所以我们的图片以及其他一些元素需要根据屏幕宽度自适应的等比例缩放，这里就需要用到比例盒子的布局方法。接下来让我们一起来了解下实现比例盒子的几种方法吧！

这里会介绍四种实现方式，分别是用css的vw单位，垂直方向的padding或者margin，以及因此产生的问题而衍生的用伪元素实现的解决方法。

注意：按照规定，margin, padding 的百分比数值是相对 父元素宽度 的宽度计算的。

CSS 单位 VW

宽度高度都用同一个单位VW，其他比例也是相应的计算元素宽高占屏幕宽度的百分比。

<div class="vw"></div>.vw{width: 20vw;height: 20vw;background-color: #000;
}

垂直方向的padding+absolute

垂直方向的padding（padding-top/padding-bottom），因为是用padding撑开的，所以子元素会跑到区域外，所以该容器要相对定位，子元素一般全部绝对定位在里面。

//因为必须要有父元素的宽度作为计算的参照，所以添加了一个容器，
开发时自己清楚父元素的宽度就行，一般父元素100%宽度比较方便计算。<div class="padding-wp"><div class="padding"></div>
</div>.padding-wp{width: 20%;
}
.padding{position: relative;/* 子元素要绝对定位 */width: 100%;padding-top: 100%;max-height: 100px; /* 不起作用 */overflow: hidden;background-color: yellow;
}

看到这里写了max-height 不起作用，是因为 max-height 属性只限制于 height，也就是只会对元素的 content height 起作用，那么我们是不是能用一个子元素撑开 content 部分的高度，从而使 max-height 属性生效呢？于是我们就用伪元素的方式来实现。

垂直方向的padding+absolute+ :after

<div class="padding-wp-after"><div class="padding-after"></div>
</div>.padding-wp-after{width: 20%;
}
.padding-after{position: relative;/* 子元素要绝对定位 */width: 100%;max-height: 100px; /* 起作用 */overflow: hidden;background-color: blue;
}
.padding-after:after{content: "";display: block;padding-top: 100%;
}

这里我们就能看到max-height起作用了。

垂直方向的margin+absolute+ :after

<div class="margin-wp-after"><div class="margin-after"></div>
</div>.margin-wp-after{width: 20%;
}
.margin-after{width: 100%;max-height: 100px; /* 起作用 */background-color: #000;overflow: hidden;
}
.margin-after:after{content: "";display: block;margin-top: 100%;
}

这里用伪元素的margin-top来撑开了父容器的空间，但是会发现父容器多了一个属性overflow: hidden;这是因为要触发元素的BFC属性，不然margin会有穿透的问题。

总结

本文介绍了几种实现比例盒子的方法，不对相信看完此文的你应该也知道了以上方法的利弊，方法一的兼容性不言而喻，方法二会有max-height的问题，方法四margin经常会有穿透，重叠，对上下文影响比较大也不推荐，所以，你应该猜到了，我推荐方法三！用伪元素以及定位的方法实现，如果你用了less/sass这样的CSS预编译语言，那你就可以写一个比例盒子的混淆，方便在其他地方调用。比如

//等比例的盒子
@mixinliftSizeBox ($size:20%){&:after{display: block;content:"";padding-top:$size;}>.inner{position: absolute;width:100%;height: 100%;top:0;left:0;}
}//背景图实现的等比图,默认正方形
@mixinliftSizePic ($width:20%,$height:$width){width:$width;background-size:cover;background-position:center;&::after{content: "";display: block;padding-top:$height;}
}

本文DEMO codepen地址 https://codepen.io/xiangshuo1992/pen/ZayEYZ

width="100%" height="400" scrolling="no" title="ZayEYZ" src="//codepen.io/xiangshuo1992/embed/ZayEYZ/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true">See the Pen <a href="https://codepen.io/xiangshuo1992/pen/ZayEYZ/">ZayEYZ</a> by Luke.Deng (<a href="https://codepen.io/xiangshuo1992">@xiangshuo1992</a>) on <a href="https://codepen.io">CodePen</a>.


本文参考：
纯 CSS 实现自适应正方形

有兴趣你还可以了解更多
CSS实现长宽比的几种方案