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:;
padding-top: 80%;
} .box {
position: absolute;
width: 80%;
height: 100%;
left: 10%;
top:;
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。