CSS实现自适应的正方形
摘要
在开发移动端时，会遇到类似于九宫格菜单的页面，宽度很好设置，一般设置为“33.333%”或者其他，但是高度呢？下面介绍几种常用方法。
方法1：使用padding-top百分比
.square {
width: 100px;
height: 0;
padding-top: 100%; /* 使高度等于宽度 */
position: relative;
}方法2：使用aspect-ratio属性（推荐现代浏览器）
.square {
width: 100px; /* 或使用百分比、vw等单位 */
aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */
}方法3：使用padding-bottom百分比
.square {
width: 100px;
height: 0;
padding-bottom: 100%; /* 使高度等于宽度 */
}方法4：使用flexbox布局
.square {
display: flex;
width: 100px; /* 或使用其他单位如vw, %, 等 */
}
.square::before {
content: "";
width: 0; /* 或者使用100%来使其填充容器宽度 */
padding-top: 100%; /* 使高度等于宽度 */
}方法5：使用grid布局
.square {
display: grid;
}
.square::before {
content: "";
width: 100%; /* 或使用其他单位如vw, %, 等 */
padding-top: 100%; /* 使高度等于宽度 */
}结论
对于现代浏览器，推荐使用aspect-ratio属性。对于需要兼容旧浏览器的场景，你可以选择使用padding-top或padding-bottom百分比的方法。如果你想要完全自适应的正方形，可以考虑使用flexbox或grid布局的方法。