aspect-ratio: 1/1 是实现响应式正方形容器最直接方案，但需满足块级元素、明确宽度来源、不与 height 冲突、flex 子项设 min-width: 0 等前提；不支持时 padding-bottom: 100% 是最可靠 fallback，需配合 position: relative 和绝对定位子元素；微信 x5 等旧环境须双写结构而非仅靠 @supports。
现代移动端项目中，aspect-ratio: 1 / 1 是实现响应式正方形容器最直接有效的方案，但必须确认运行环境是否支持（iOS 15.4+、Chrome 88+、Firefox 89+），否则会完全失效——不是降级，而是被忽略，容器塌缩为内容高度。
为什么 aspect-ratio: 1 / 1 在移动端常“不生效”
它不是 CSS “建议”，而是强制约束；但生效有硬性前提：
-
aspect-ratio只对块级盒模型起作用，display: inline或未显式设display: block的元素无效 - 必须有一个确定的宽度来源：比如
width: 100%、width: 200px、或 Flex/Grid 中由父容器分配的flex-basis/grid-column - 不能和
height同时设为非auto值，否则height优先生效，aspect-ratio被静默忽略 - 在
display: flex容器中，若子项未设min-width: 0，Flex 的默认收缩行为可能把正方形压扁（尤其嵌套多层时）
padding-bottom: 100% 方案的实际落地要点
这是目前兼容性最广、行为最可预测的 fallback，但细节极易出错：
- 父容器必须设
position: relative，否则内部position: absolute子元素会脱出文档流 - padding 百分比始终基于父容器宽度计算，所以父容器必须有明确宽度（如
width: 100%或flex-basis），否则padding-bottom: 100%计算结果为 0 - 子元素需完整覆盖：
position: absolute; top: 0; left: 0; right: 0; bottom: 0，只写width: 100%; height: 100%在无显式父高时会得到 0 - 如果容器本身需要内边距（
padding）或边框（border），不能直接加在正方形容器上——得额外包一层，否则padding-bottom: 100%会把内容顶高或挤出
微信内置浏览器等旧环境下的真实兼容策略
微信 Android 端长期使用 X5 内核，不支持 aspect-ratio，且 @supports 无法触发结构降级（伪元素和绝对定位结构不同），因此不能只靠 CSS 特性检测：
- 必须用 DOM 结构判断或 UA 检测做服务端/JS 分流，或直接双写结构：一个带
aspect-ratio的现代结构 + 一个带padding-bottom的后备结构，用display: none切换 - 不要依赖
@supports (aspect-ratio: 1 / 1)来包裹整个样式块——它在不支持的浏览器里整块失效，但 padding 方案仍需独立声明 - 旧版 Safari（iOS ≤ 15.3）对
aspect-ratio的支持是 partial，某些 flex 场景下会回退到 content-box 行为异常，建议统一按不支持处理
真正容易被忽略的是：正方形容器的“响应式”不只关乎比例，更在于它如何影响后续兄弟元素的流式布局。用 padding-bottom 会真实撑开父容器高度，而 aspect-ratio 在某些 Flex/Grid 配置下可能不参与高度计算，导致下方内容上移——这点在滚动长页或动态加载时尤为明显。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
