一、PC端和移動端的屏幕分辨率多種多樣，當盒子的寬度爲百分比時，讓寬度和高度始終保持相等的方法
效果圖：
代碼：
<!DOCTYPE html>
<html lang="en">
<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>
說明：
1、將盒子的寬度設置爲自己需要的百分比，這裏以16%爲例；
2、將蓋盒子的高度設置爲100%；
3、通過僞類控制高度 （**************）
ul li::before{ content: ""; padding-top: 100%; vertical-align: middle; display: block;}
4、盒子裏面的內容一定要定位，如例子中的span（******************）
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、這樣就實現了，無論設備的分辨率怎麼變化，這個盒子始終都是正方形的寬度啦！！！！！！