aspect-ratio 在 chrome 103+ 和 safari 15.4+ 中可用，旧版 safari 会忽略该属性；需用 @supports 检测并降级为 padding-bottom 伪元素方案，注意父容器 width 必须可计算，且 aspect-ratio 不控制内容溢出或居中。
aspect-ratio 在 Chrome 103+ 中可用，但 Safari 15.4+ 才开始支持（iOS 15.4+）
如果你的项目需要兼容 Safari 15.3 或更早版本（比如企业内网仍用 macOS Monterey 12.3），aspect-ratio: 1 / 1 会直接被忽略，元素退化为默认宽高行为。这不是写法错误，是浏览器根本不识别该属性。
实操建议：
- 用
@supports (aspect-ratio: 1)包裹现代方案，降级用伪元素 + padding-bottom 方案 - 检查真实用户 UA 统计——很多“需兼容 Safari”场景其实已无须支持 iOS 15.3 及以下
- 若用 Tailwind，确保启用了
aspect-square并确认其生成的 CSS 被实际注入（某些 SSR 场景下 purgeCSS 可能误删）
padding-bottom 实现正方形时，父容器必须是 block 且 width 可计算
常见错误：把 padding-bottom: 100% 套在 display: inline 或 position: absolute 且未设 width 的元素上，此时百分比 padding 会失效（规范规定：inline 元素不支持 padding-bottom 百分比；absolute 元素的百分比 padding 基于包含块宽度，但若包含块 width 为 auto，则结果不可靠）。
实操建议：
- 父容器加
display: block和明确 width（如width: 100%或固定值） - 子容器用
position: absolute; top: 0; left: 0; width: 100%; height: 100%铺满 - 伪元素方案中，
::before设padding-bottom: 100%，主内容区用position: absolute覆盖其上
aspect-ratio 不影响 intrinsic size，但会覆盖 height:auto 计算逻辑
当元素有内容（比如文字或图片）且未设 height，aspect-ratio 会让浏览器优先按宽高比反推高度，而不是按内容撑开。这和传统盒模型直觉冲突——例如一个 width: 200px; aspect-ratio: 1 的 div，即使里面放了 3 行文字，高度也强制为 200px，文字可能溢出。
实操建议：
- 若需内容自适应高度，别用
aspect-ratio，改用min-height+max-height控制范围 - 若要等比缩放图片，优先用
<img style="max-width:90%">，此时height: auto会被 aspect-ratio 修正，而非忽略 - Flex/Grid 容器中，
aspect-ratio仅作用于单个项，不影响其他项的对齐基准线
用 JS 动态维持正方形时，resize observer 比 window.onresize 更可靠
监听 window.onresize 在快速拖拽窗口时会频繁触发、丢失中间状态，且无法响应非窗口级尺寸变化（如侧边栏展开、font-size 切换）。而 ResizeObserver 可精确捕获任意元素宽高变更。
实操建议：
- 对目标元素实例化
new ResizeObserver，回调里读取entries[0].contentRect.width并设element.style.height = width + 'px' - 避免在回调中触发重排（如读 offsetHeight 后立刻写 style），应批量读、单次写
- 若需 SSR 兼容，初始化时先用
getComputedStyle(el).width获取初始宽，再启动 observer
aspect-ratio 不会阻止内容溢出，也不提供裁剪或居中能力**。它只管“宽高比例”，不管“内容怎么放”。需要居中、截断、object-fit 效果，还得额外加 overflow: hidden、display: flex、object-fit: cover 这类配合样式。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
