关于css控制div的缩放问题

响应式布局已经是时下的主流趋势，今天就来探讨一下关于流式布局里div的缩放问题。

比如，建立4个div，要实现宽度随窗口变化而变化很简单，把宽度设成百分比形式就可以了。

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>

css这样写：

.box {
    float: left;
    width: 21%;
    height: 200px;
    margin: 10px 2%;
    background-color: #abcdef;
}

这样的话我们的div倒是可以随着窗口的变化进行宽度的缩放，但是高度是不变的，这样肯定不行，我们要达到按比例缩放的话高度肯定也是要写成百分比的。那么怎么写呢？直接写百分比么 height:21%;这个就别想了，肯定不行的。
我们可以借用一个不常见的属性，padding-bottom属性。
从手册可以看到，当padding-bottom为百分比的值时，定义的是基于父元素宽度的百分比下内边距。
所以我们的css如果这样写：

.box {
    float: left;
    width: 21%;
    margin: 10px 2%;
    background-color: #abcdef;
    padding-bottom: 21%;
}

我们就会得到一个和我们宽度相等的高度，而且我们的div会随着窗口大小的改变进行等比例的缩放。

但是这个方法有一个问题就是，手册上说我们用的padding-bottom的这个值

不会如预期地那样工作于所有的浏览器中。

感觉像是个雷啊

---

今天就先到这里，感兴趣的小伙伴可以一起探讨探讨。