aspect-ratio: 1 / 1 能实现响应式正方形，但易被 height/min-height、flex 的 align-items: stretch、父容器宽度为 auto 或 grid 中误设在容器上等干扰导致失效；需正确应用并兼容旧版 safari。
直接写 aspect-ratio: 1 / 1 就能实现响应式正方形，但前提是它没被 height、min-height 或父容器的拉伸行为悄悄覆盖。
为什么 aspect-ratio: 1 / 1 写了却不是正方形
不是属性无效，而是浏览器压根没让它生效。最常见干扰源有三个：
-
height或min-height被显式声明（哪怕只是height: auto或min-height: 0），都会直接屏蔽aspect-ratio的计算逻辑 - 父容器是
display: flex且未重置align-items，默认的stretch会强制子项填满可用高度，覆盖比例 - 父容器宽度为
auto（比如没设width、没用col-6、也没在 Grid/Flex 中分配空间），aspect-ratio就失去了“1份宽”这个基准，无法推导高度
Grid 布局中每个格子设 aspect-ratio 的实操要点
必须把 aspect-ratio: 1 / 1 写在每个 .grid-item 上，而不是 .grid 容器上。容器只管轨道划分，比例由子项自己算：
- 容器用
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))控制列数，gap控制间距 - 每个子项设
aspect-ratio: 1 / 1+width: 100%，height留空或明确写成height: auto - 若子项含图片，加
img { width: 100%; height: 100%; object-fit: cover; display: block; }防底部空白和拉伸 - 别碰
grid-auto-rows—— 它不参与比例控制，只影响无明确行定位的项目
如何安全地兼容 Safari 15.3 及更旧版本
不能只靠 @supports 包裹整个样式块，微信 X5 内核等环境根本不识别该规则，会直接跳过所有声明。稳妥做法是双写结构 + 层级降级：
- 现代写法放前面：
aspect-ratio: 1 / 1必须写在padding-bottom: 100%之前，同一选择器内 - 后备结构要独立存在：外层容器加
position: relative，子内容用position: absolute; top: 0; left: 0; width: 100%; height: 100%塞满 - 如果父容器本身是 Flex 子项，记得加
min-width: 0，否则 flex shrink 可能让宽度坍缩，导致padding-bottom: 100%计算出 0 - 百分比值别手算错：
1 / 1对应padding-bottom: 100%，4 / 3是75%，不是133%
真正容易被忽略的是嵌套层级里的隐性约束：比如 Vue 的 <slot></slot> 外层组件、CMS 输出的卡片 wrapper、甚至某个 CSS-in-JS 库注入的不可见 height: 100%，都可能让 aspect-ratio 在你完全没察觉的情况下失效。查问题时，得一层层往上 inspect computed styles，而不是只盯着目标元素本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
