移动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预编译语言，那你就能够写一个比例盒子的混淆，方便在其余地方调用。好比

//等比例的盒子
@mixin liftSizeBox ($size:20%){
    &:after{
        display: block;
        content:"";
        padding-top:$size;
    }
    >.inner{
        position: absolute;width:100%;height: 100%;top:0;left:0;
    }
}

//背景图实现的等比图,默认正方形
@mixin liftSizePic ($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>.&#10;

---

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

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