最省事方案是 aspect-ratio: 1 / 1，但仅支持 Chrome 88+、Firefox 89+、Safari 15.4+；旧版 Safari 和 IE 需降级用 padding-top: 100% + absolute 定位，并注意 min-width: 0、父宽约束及 vh/vmax 的视口依赖缺陷。
用 aspect-ratio 最省事，但得看浏览器支持不支持
现代 CSS 里最直接的办法就是 aspect-ratio: 1 / 1，它让盒子宽高比固定为 1:1，不管父容器怎么变，盒子自己会缩放保持正方形。
但注意：Chrome 88+、Firefox 89+、Safari 15.4+ 才原生支持。旧版 Safari（比如 iOS 15.2）或 IE 完全不认这个属性，直接忽略——页面不会崩，但宽高就失控了。
实操建议：
- 如果项目只跑在较新环境（比如内部管理后台、iOS 16+/Android Chrome），放心用
aspect-ratio: 1 / 1 - 需要兼容老 Safari（常见于微信内置浏览器、部分企业微信场景），得 fallback 到 padding 技巧
- 别给
aspect-ratio元素同时设width和height，否则会覆盖比例逻辑
padding 百分比实现正方形，关键在“高度由宽度驱动”
CSS 中 padding-top 或 padding-bottom 的百分比值，是相对于**父容器宽度**计算的，不是高度。这个特性可以被用来“骗出等高”。
立即学习“前端免费学习笔记（深入）”；
典型写法是把内容区域用 position: absolute 塞进一个 padding 撑开的容器里：
.square {
width: 100%;
padding-top: 100%; /* 高度 = 父宽 */
position: relative;
}
.square > * {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}常见错误现象：
- 盒子突然消失或内容溢出：忘了给子元素加
position: absolute，或者漏了top/left/right/bottom - 响应式失效：父容器没设
width（比如 flex 项没设flex-basis），导致百分比 padding 计算为 0 - 内边距干扰：如果盒子本身还要内边距，得额外包一层，不然
padding-top: 100%会把内容顶下去
Flex + aspect-ratio 混用时，注意主轴方向和最小尺寸限制
当盒子放在 display: flex 容器里，又用了 aspect-ratio，容易出现“明明写了 1/1，却拉不方”的情况。
根本原因是：flex 项默认有 min-width: auto（或 min-height: auto），会阻止它压缩到太小，尤其在窄屏下。
实操建议：
- 加一句
min-width: 0（横向布局）或min-height: 0（纵向布局）释放约束 - 别依赖
flex: 1自动撑满再靠aspect-ratio调整——flex: 1优先级更高，可能把比例“压扁” - 测试时手动缩窄视口，看是否在某个宽度下突然变形；那是
min-width在作祟
不要用 vh/vmax 模拟正方形，除非你真需要视口绑定
有人试过 width: 50vw; height: 50vw，看起来也方，但它绑定的是视口宽度，不是容器宽度。一旦盒子不在根级、或父容器有 padding/margin，立刻失准。
更隐蔽的问题：
- 横屏 iPad 上
vmax可能取到高度值，导致盒子比预期大一圈 - 地址栏收起/弹出时，
vh值会抖动，盒子跟着跳动（Safari 尤其明显） - 打印样式表里
vh无效，导出 PDF 时正方形直接塌掉
真正需要“始终占屏幕一半宽度且正方”的场景极少。大多数时候，你要的是“在父容器里自适应”，那就老实用 aspect-ratio 或 padding 方案。
复杂点在于：没有银弹。得先确认你的部署环境、父容器行为、是否要打印、有没有 JS 动态改宽高——这些都会让同一个 CSS 属性表现不同。
