移动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