背景
在開發(fā)活動頁h5的情況下，很多元素都是背景圖加DIV構(gòu)成的，在如今響應(yīng)式布局的要求下后室，很多能自動調(diào)整尺寸的元素能夠做到高寬自適應(yīng)，如img混狠，通過{width:50%;height:auto;}實現(xiàn)圖片高度跟隨寬度比例調(diào)整岸霹。
然而，用的最多的標(biāo)簽一哥Div卻不能做到自動調(diào)整（要么從父級繼承将饺，要么自行指定px贡避，要么給百分比！但是這個百分比是根據(jù)父級的高度來計算的予弧，根本不是根據(jù)元素自身的寬度刮吧，那么就做不到Div的寬高達(dá)成一定的比例=-=），所以造成某些定位于某些背景圖片上的內(nèi)容區(qū)域不能自適應(yīng)掖蛤，造成某些機型樣式對齊困難杀捻。
解決辦法
最開始的思路就是像react-native一樣通過獲取寬度，通過比例求出高度蚓庭。所以需要通過js動態(tài)判斷div的寬度來設(shè)置高度致讥。
window.onresize = function(){}
感覺實現(xiàn)起來很別扭就放棄了。
仔細(xì)回顧了下css器赞，最終通過padding來實現(xiàn)此功能垢袱；我們能夠知道寬度的自適應(yīng)是根據(jù)viewport的width來調(diào)整的，比如{width：50%}就是瀏覽器可視區(qū)域的50%港柜，resize之后也會自動調(diào)整请契。
而height指定百分比后，他會自行找到viewport的height來調(diào)整，跟width沒有任何關(guān)系爽锥，自然兩者不能達(dá)到比例關(guān)系了涌韩。通過這個思路，要找到一個能跟viewport的width扯上裙帶關(guān)系的屬性救恨，就能解決這個問題了贸辈。
這個屬性就是padding，padding是根據(jù)viewport的width來調(diào)整的肠槽，巧就巧在padding-top和padding-bottom也是根據(jù)viewport的width來計算的擎淤，那么通過設(shè)置這個屬性就能跟width達(dá)成某種比例關(guān)系了，
我們首先指定元素的width為父級元素的90%（父級元素為任意有高寬的元素）
.father{
max-width: 768px;
height: 100%;
margin: 0 auto;
background-color: #222;
}
這個時候我們再設(shè)置element的height為0秸仙，padding-bottom:90%;
.element{
width: 90%;
margin: 0 auto;
background-color: #eee;
height: 0;
padding-bottom: 90%;
}
element就變成了一個寬度90%嘴拢，高度為0（但是他有90%width的padding-bottom）的自適應(yīng)寬度的正方形了，效果如下圖
這個時候可能有人要問了寂纪，這個div的高度為0席吴，那如果我要在element里放置元素呢，那豈不是overflow了捞蛋，這里就要提到overflow屬性了孝冒，它的計算是包括div的content和padding的，也就是說拟杉，
原來你的div可能是個{width：50px;height:50px;padding:0}的div庄涡，現(xiàn)在變成{width:50px;height:0;padding-bottom:50px;}的div了，尺寸還是一樣的搬设，通過指定這個div的子元素的定位穴店，一樣可以正常顯示
這樣就可以通過設(shè)定父級元素father、我們需要的元素element拿穴、子級元素datail來實現(xiàn)任意情況下該需求（div寬高定比例）泣洞。
