背景

在開(kāi)發(fā)活動(dòng)頁(yè)h5的情況下，很多元素都是背景圖加DIV構(gòu)成的，在如今響應(yīng)式布局的要求下，很多能自動(dòng)調(diào)整尺寸的元素能夠做到高寬自適應(yīng)，如img，通過(guò){width:50%;height:auto;}實(shí)現(xiàn)圖片高度跟隨寬度比例調(diào)整。

然而，用的最多的標(biāo)簽一哥Div卻不能做到自動(dòng)調(diào)整（要么從父級(jí)繼承，要么自行指定px，要么給百分比！但是這個(gè)百分比是根據(jù)父級(jí)的高度來(lái)計(jì)算的，根本不是根據(jù)元素自身的寬度，那么就做不到Div的寬高達(dá)成一定的比例=-=），所以造成某些定位于某些背景圖片上的內(nèi)容區(qū)域不能自適應(yīng)，造成某些機(jī)型樣式對(duì)齊困難。

解決辦法

最開(kāi)始的思路就是像react-native一樣通過(guò)獲取寬度，通過(guò)比例求出高度。所以需要通過(guò)js動(dòng)態(tài)判斷div的寬度來(lái)設(shè)置高度。

window.onresize = function(){}

感覺(jué)實(shí)現(xiàn)起來(lái)很別扭就放棄了。

仔細(xì)回顧了下css，最終通過(guò)padding來(lái)實(shí)現(xiàn)此功能；我們能夠知道寬度的自適應(yīng)是根據(jù)viewport的width來(lái)調(diào)整的，比如{width：50%}就是瀏覽器可視區(qū)域的50%，resize之后也會(huì)自動(dòng)調(diào)整。

而height指定百分比后，他會(huì)自行找到viewport的height來(lái)調(diào)整，跟width沒(méi)有任何關(guān)系，自然兩者不能達(dá)到比例關(guān)系了。通過(guò)這個(gè)思路，要找到一個(gè)能跟viewport的width扯上裙帶關(guān)系的屬性，就能解決這個(gè)問(wèn)題了。

這個(gè)屬性就是padding，padding是根據(jù)viewport的width來(lái)調(diào)整的，巧就巧在padding-top和padding-bottom也是根據(jù)viewport的width來(lái)計(jì)算的，那么通過(guò)設(shè)置這個(gè)屬性就能跟width達(dá)成某種比例關(guān)系了，

我們首先指定元素的width為父級(jí)元素的90%（父級(jí)元素為任意有高寬的元素）

.father{
    max-width: 768px;
    height: 100%;
    margin: 0 auto;
    background-color: #222;
}

這個(gè)時(shí)候我們?cè)僭O(shè)置element的height為0，padding-bottom:90%;

.element{
    width: 90%;
    margin: 0 auto;
    background-color: #eee;
    height: 0;
    padding-bottom: 90%;
}

element就變成了一個(gè)寬度90%，高度為0（但是他有90%width的padding-bottom）的自適應(yīng)寬度的正方形了，效果如下圖

image.png

image.png

這個(gè)時(shí)候可能有人要問(wèn)了，這個(gè)div的高度為0，那如果我要在element里放置元素呢，那豈不是overflow了，這里就要提到overflow屬性了，它的計(jì)算是包括div的content和padding的，也就是說(shuō)，

原來(lái)你的div可能是個(gè){width：50px;height:50px;padding:0}的div，現(xiàn)在變成{width:50px;height:0;padding-bottom:50px;}的div了，尺寸還是一樣的，通過(guò)指定這個(gè)div的子元素的定位，一樣可以正常顯示

這樣就可以通過(guò)設(shè)定父級(jí)元素father、我們需要的元素element、子級(jí)元素datail來(lái)實(shí)現(xiàn)任意情況下該需求（div寬高定比例）。