在移动开发中，有时候需要设置一个宽高相等的div，并且为了使它能够适配更多的屏幕，于是需要让它的宽高和屏幕宽高成一定的比例。这里将提供一个css的解决方案，让一些后端开发不用再写繁琐的js。
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。
原文：https://www.cnblogs.com/heshuaiblog/p/11774613.html