@media (aspect-ratio: w / h) 可精准匹配设备屏幕宽高比，适配折叠屏、超宽屏及竖屏等场景，并需结合 min-width/max-width 判断真实可用空间，同时用 @supports 保障兼容性。
直接用 @media (aspect-ratio: w / h) 可以精准匹配设备屏幕的宽高比，比单纯依赖宽度断点更贴合实际显示效果，尤其适合折叠屏、超宽屏或竖屏设备。
用 aspect-ratio 媒体查询识别设备形态
屏幕比例本身就能反映设备使用场景：超宽屏（如 21/9）常用于展开态折叠手机或桌面显示器，窄高屏（如 9/16）多见于竖屏手机。CSS 提供了原生支持：
-
@media (aspect-ratio: 21 / 9)—— 匹配超宽比例，适合横屏 Banner 或分栏布局 -
@media (aspect-ratio: 9 / 16)—— 匹配常规竖屏手机，可隐藏非核心控件、加大点击区域 -
@media (min-aspect-ratio: 16 / 9)—— 屏幕足够“扁”时启用视频全屏样式 -
@media (max-aspect-ratio: 4 / 3)—— 屏幕偏“方”时切换为网格紧凑布局
和 width/height 断点配合使用
单靠 aspect-ratio 不够，需结合尺寸判断是否真有足够空间。比如折叠屏展开后虽是 21/9，但若宽度不足 600px，仍不适合放双栏：
-
@media (min-width: 600px) and (aspect-ratio: 21 / 9)—— 真正的展开态大屏 -
@media (max-width: 414px) and (orientation: portrait) and (aspect-ratio: 9 / 16)—— 主流 iPhone 竖屏场景 - 避免写
@media (min-width: 768px)就切平板样式——有些小平板宽仅 600px 却是 4/3 比例，硬切会错配
适配视频与卡片类容器的比例响应
媒体查询中的 aspect-ratio 不只用于设备判断，还能驱动内容容器行为：
- 在
@media (aspect-ratio: 16 / 9)下，给 .video-wrapper 设置aspect-ratio: 16 / 9并启用object-fit: cover - 进入
@media (aspect-ratio: 4 / 3)时，把 .card-grid 的子项aspect-ratio从5 / 2改为4 / 3，保持视觉一致性 - 搭配
@supports (aspect-ratio: 1)做降级：不支持时用 padding-bottom + position: absolute 方案
注意兼容性与 fallback
目前主流浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）均支持 aspect-ratio 媒体查询，但旧版 Android WebView 或 IE 不支持。稳妥做法是：
- 先写通用样式（如 flex 布局 + max-width 控制）作为基础
- 再用
@media (aspect-ratio: ...)增强，在支持环境下覆盖关键比例逻辑 - 对关键功能（如视频容器），用
@supports not (aspect-ratio: 1)提供 padding-bottom 后备
