响应式布局已经是时下的主流趋势，今天就来探讨一下关于流式布局里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的这个值
不会如预期地那样工作于所有的浏览器中。
感觉像是个雷啊
今天就先到这里，感兴趣的小伙伴可以一起探讨探讨。
