1. 前言
在移動開發中，有時候需要設置一個寬高相等的div，並且為了使它能夠適配更多的屏幕，於是需要讓它的寬高和屏幕寬高成一定的比例。這里將提供一個css的解決方案，讓一些后端開發不用再寫繁瑣的js。
2. 實現代碼
html:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
</html>
css:
<style> .wrapper { position: relative; height: 0; padding-top: 80%; } .box { position: absolute; width: 80%; height: 100%; left: 10%; top: 0; border: 1px solid #ccc; } </style>
效果：
這樣我們就得到一個適應屏幕寬度的正方形，在實際應用中，我們還可以給這個box設置border-radius以及其他各種屬性，得到一個更加酷炫的效果。現在我們來分析一下為什么這個css會實現這個效果，了解它的原理有助於我們能夠更加得心應手的去修改它。
給wrapper設置height:0;padding-top:80%;會讓wapper占據一個寬高比例為10：8的區域。有了這么一個區域是不是就感覺突然有點靈感了。是的，我們在給它的子元素的寬度再取一個百分比，就可以讓它的寬高一樣了。這里還有一個注意的，warpper的內部其實是沒有高度，於是這個子元素就必須使用position:absolute，同時需要給wrapper加上position:relative。
作為一個前端小菜的我，快快努力學習吧，fitting。