如何通過CSS實現(xiàn)高度 height 隨寬度 width 變化而變化忧换，保持長寬比例不變宋雏，寬度是根據(jù)父元素寬度變化的办绝？
使用 :before 偽元素击费，能獲取到實際高度著觉，推薦
html:
<div>
<span>1</span>
</div>
css:
body {
width: 100%;
font-size: 0;
text-align: center;
}
div {
display: inline-block;
width: 20%;
background: green;
font-size: 12px;
position: relative;
vertical-align: middle;
}
div:nth-child(2n) {
background: orange;
}
div:before {
content: "";
display: inline-block;
padding-bottom: 100%;
width: .1px;
vertical-align: middle;
}
div span {
display: inline-block;
vertical-align: middle;
font-size: 4em;
color: #fff;
}
奇淫技巧
html:
<div class = "father">
<div class = "daughter"></div> // 父女情深
</div>
css:
.father {
width: 100%;
}
.daughter {
width: 20%; height: 0;
padding-top: 20%;
background: black;
}
主要知識：上下邊距的百分比數(shù)值是以父元素寬度作為參照的溜徙。
在開發(fā)移動端頁面時在跳，需要供應的手機屏幕大小不一鸯檬，此時經(jīng)常會使用百分比來界定元素的大小，那么如何讓元素按寬高比例布局呢溜在？
在保持元素寬高比恒定的情況下陌知，要使得元素可以和父元素同比縮放他托。此時會用到 padding掖肋。
需要知道的是：一個元素的 padding，如果值是一個百分比赏参，那這個百分比是相對于其父元素的寬度而言的志笼，padding-bottom 也是如此。
使用 padding-bottom 來代替 height 來實現(xiàn)高度與寬度成比例的效果把篓，將 padding-bottom 設置為想要實現(xiàn)的 height 的值纫溃。同時將其 height 設置為 0 以使元素的“高度”等于 padding-bottom 的值，從而實現(xiàn)需要的效果韧掩。
此時CSS代碼如下：
div {
float: left;
margin: 10px 5%;
padding-bottom: 20%;
width: 20%;
height: 0;
}
這里寬高比是1比1紊浩，實現(xiàn)的是正方形，并且實現(xiàn)同比縮放。
####### 用vh單位
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="ui-square-nerd">
</div>
<div class="ui-square">
</div>
</body>
</html>
css:
.ui-square-nerd {
width: 20%;
height: 0;
padding-bottom: 20%;
background: blue;
}
.ui-square {
margin-top: 30px;
width: 20vh;
height: 20vh;
background: green;
}
