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布局的方法。