摘要

在开发移动端时，会遇到类似于九宫格菜单的页面，宽度很好设置，一般设置为“33.333%”或者其他，但是高度呢？下面介绍几种常用方法。

方法1：使用padding-top百分比

css">.square {width: 100px;height: 0;padding-top: 100%; /* 使高度等于宽度 */position: relative;
}

方法2：使用aspect-ratio属性（推荐现代浏览器）

css">.square {width: 100px; /* 或使用百分比、vw等单位 */aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */
}

方法3：使用padding-bottom百分比

css">.square {width: 100px;height: 0;padding-bottom: 100%; /* 使高度等于宽度 */
}

方法4：使用flexbox布局

css">.square {display: flex;width: 100px; /* 或使用其他单位如vw, %, 等 */
}
.square::before {content: "";width: 0; /* 或者使用100%来使其填充容器宽度 */padding-top: 100%; /* 使高度等于宽度 */
}

方法5：使用grid布局

css">.square {display: grid;
}
.square::before {content: "";width: 100%; /* 或使用其他单位如vw, %, 等 */padding-top: 100%; /* 使高度等于宽度 */
}

结论

对于现代浏览器，推荐使用aspect-ratio属性。对于需要兼容旧浏览器的场景，你可以选择使用padding-top或padding-bottom百分比的方法。如果你想要完全自适应的正方形，可以考虑使用flexbox或grid布局的方法。