響應(yīng)式布局已經(jīng)是時(shí)下的主流趨勢(shì)，今天就來(lái)探討一下關(guān)于流式布局里div的縮放問(wèn)題。

比如，建立4個(gè)div，要實(shí)現(xiàn)寬度隨窗口變化而變化很簡(jiǎn)單，把寬度設(shè)成百分比形式就可以了。

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

css這樣寫(xiě)：

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

這樣的話我們的div倒是可以隨著窗口的變化進(jìn)行寬度的縮放，但是高度是不變的，這樣肯定不行，我們要達(dá)到按比例縮放的話高度肯定也是要寫(xiě)成百分比的。那么怎么寫(xiě)呢？直接寫(xiě)百分比么 height:21%;這個(gè)就別想了，肯定不行的。
我們可以借用一個(gè)不常見(jiàn)的屬性，padding-bottom屬性。
從手冊(cè)可以看到，當(dāng)padding-bottom為百分比的值時(shí)，定義的是基于父元素寬度的百分比下內(nèi)邊距。
所以我們的css如果這樣寫(xiě)：

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

我們就會(huì)得到一個(gè)和我們寬度相等的高度，而且我們的div會(huì)隨著窗口大小的改變進(jìn)行等比例的縮放。

但是這個(gè)方法有一個(gè)問(wèn)題就是，手冊(cè)上說(shuō)我們用的padding-bottom的這個(gè)值

不會(huì)如預(yù)期地那樣工作于所有的瀏覽器中。

感覺(jué)像是個(gè)雷啊

今天就先到這里，感興趣的小伙伴可以一起探討探討。