移動端布局，div按比例布局，寬度為百分比，讓高度和寬度一樣，即讓div為正方形
最近在寫一個小程序，遇到了一個布局問題:一個div寬度比例width:20%，比如是屏幕寬度的20%,想讓高度和寬度一樣，即讓這個div是正方形，怎么實現呢？因為做的是移動端，屏幕寬度不定，又想讓這個div盒子寬高一樣，呈現為正方形。效果如下：
現在將查詢到的方案匯總一下：
方案一：JavaScript/jQuery方法：
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
ul{
width: 100%;
list-style: none;
}
li{
width: 20%;
float: left;
}
li:first-child{
background: red;
}
li:nth-child(2){
background: green;
}
li:nth-child(3){
background: blue;
}
li:nth-child(4){
background: yellow;
}
li:nth-child(5){
background: pink;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script src="wjs/lib/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).on('resize', function () {
$('li').css('height',$('li').css('width'));
}).trigger('resize');
})
</script>
方案二：通過CSS中的padding-top或padding-bottom將盒子撐起來
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
ul{
width: 100%;
list-style: none;
}
li{
width: 20%;
float: left;
padding-top: 20%;
}
li:first-child{
background: red;
}
li:nth-child(2){
background: green;
}
li:nth-child(3){
background: blue;
}
li:nth-child(4){
background: yellow;
}
li:nth-child(5){
background: pink;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
方案三： 使用 vw/vh 單位，但是需要注意的是vw/vh單位是將當前視口的寬度/高度平均分成100份的長度，並非父級盒子，所有需要計算一下
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
ul{
width: 80%;
margin: 0 auto;
list-style: none;
}
li{
width: 16vw;
height: 16vw;
float: left;
}
li:first-child{
background: red;
}
li:nth-child(2){
background: green;
}
li:nth-child(3){
background: blue;
}
li:nth-child(4){
background: yellow;
}
li:nth-child(5){
background: pink;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
總結： vw/vh 單位的出現無疑讓現在適應各種寬度的屏幕又有了一個更好的解決方案，但是可能在某些機型上不支持，所有有的時候還是各取所需吧！