方法一：
效果：
说明：
1、将盒子的宽度设置为自己需要的百分比，这里以 16% 为例；
2、将盖盒子的高度设置为 100%；
3、通过伪类控制高度
ul li::before{ content: ""; padding-top: 100%; vertical-align: middle; display: block;}
4、盒子里面的内容一定要定位，如例子中的 span
代码语言：javascript复制ul li span{ position: absolute; top: 50%; left: 50%;
webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}5、这样就实现了，无论设备的分辨率怎么变化，这个盒子始终都是正方形的宽度啦！！
源码：
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
ul{ width: 80%; margin: 30px auto;}
ul li{ border: 1px solid #999; list-style: none; float: left; margin-right: 1%; position: relative; width: 16%; height: 100%;}
ul li::before{ content: ""; padding-top: 100%; vertical-align: middle; display: block;}
ul li span{ position: absolute; top: 50%; left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
</style>
</head>
<body>
<!-- 当宽度为百分比的时候，如何让盒子始终保持正方形的状态 -->
<ul>
<li>
<span>1</span>
</li>
<li>
<span>2</span>
</li>
<li>
<span>3</span>
</li>
<li>
<span>4</span>
</li>
<li>
<span>5</span>
</li>
</ul>
</body>
</html>方法二：
和上边的方法类似，把盒子模型从默认的 content-box 定义为 border-box，再通过 padding 把盒子模型撑开即可。
源码：
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
ul{ width: 80%; margin: 30px auto;}
ul li{ position:relative; background:red; border-right:1px solid #fff; list-style: none; float: left; width:20%; padding-top:20%; box-sizing: border-box; }
ul li span{ position: absolute; top: 50%; left: 50%;
webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);}
</style>
</head>
<body>
<!-- 当宽度为百分比的时候，如何让盒子始终保持正方形的状态 -->
<ul>
<li>
<span>1</span>
</li>
<li>
<span>2</span>
</li>
<li>
<span>3</span>
</li>
<li>
<span>4</span>
</li>
<li>
<span>5</span>
</li>
</ul>
</body>
</html>
