aspect-ratio 可真正锁定容器宽高比，与设备方向无关；需配合 width 或 max-width 使用，且至少一个尺寸明确，否则失效；现代浏览器均支持，旧环境可用 padding-top 回退。
用 aspect-ratio 锁定容器宽高比，但不依赖设备方向API
设备方向（orientation）媒体查询（如 @media (orientation: landscape)）只反映视口宽高关系，无法“锁定”布局高度——它只是条件开关，不能主动约束尺寸。真正能强制比例的是 aspect-ratio，而且它和方向无关，无论横屏竖屏都生效。
常见误区是想靠 orientation 媒体查询 + height 固定值来“锁高”，但这样在旋转时会触发重排、可能溢出、且不响应式。而 aspect-ratio 让浏览器自动按比例推导缺失尺寸，更可靠。
-
aspect-ratio接受数值（如16/9）或两个长度（如400px / 225px），推荐用无单位比值，兼容缩放和响应式 - 它作用于块级元素或弹性/网格子项；若父容器无高度约束，子元素设
aspect-ratio后仍可能被压缩，需配合width或max-width - 不支持 IE，现代 Chrome/Firefox/Safari（含 iOS Safari 15.4+）均已支持；旧环境需回退到
padding-top技巧
横屏/竖屏下保持同一比例的实战写法
比如做一个全屏视频容器，希望在手机竖屏（375×812）和横屏（812×375）下都保持 16:9，且不拉伸、不裁剪、不滚动。
.video-container {
width: 100vw;
aspect-ratio: 16 / 9;
max-width: 100vh; /* 横屏时限制宽度不超视口高 */
margin: 0 auto;
}
关键点：
-
width: 100vw确保横屏时宽度撑满，aspect-ratio自动算出高度；竖屏时同样生效，但高度可能超视口，所以加max-width: 100vh防止溢出 - 不用
height: 100vh—— 它会让竖屏下容器过高，横屏下又过窄，破坏比例 - 若内容要居中显示，用
display: flex+align-items: center，不要依赖position: absolute偏移
遇到 aspect-ratio 不生效的典型原因
最常看到的是写了 aspect-ratio 却没效果，实际是浏览器没机会计算：它需要至少一个明确的尺寸（width 或 height）作为基准，否则会退化为 auto。
- 父容器是
display: inline或未设width的inline-block→ 子元素无法继承参考尺寸，加display: block或显式width - 用了
height: 100%但父级高度为auto→ 浏览器无法解析百分比，此时aspect-ratio失效，改用height: 0+padding-bottom回退方案 - Flex/Grid 容器中子项未设
flex: 1或grid-area→ 尺寸未被分配，aspect-ratio无输入基准 - 某些 CSS 框架（如 Tailwind）默认禁用
aspect-ratio，需在tailwind.config.js中启用aspectRatio插件
旧浏览器兼容：用 padding-top 模拟 aspect-ratio
当必须支持 Safari padding-top 是最稳定回退方案，原理是垂直 padding 按宽度计算。
.aspect-16by9 {
position: relative;
width: 100%;
}
.aspect-16by9::before {
content: "";
display: block;
padding-top: calc(9 / 16 * 100%); /* 9÷16 = 56.25% */
}
.aspect-16by9 > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
注意：padding-top 值必须是纯数字百分比（不能带单位），且只能用于块级上下文；如果容器本身有 border 或 margin，需额外调整以避免偏移。
比例控制的本质不是监听方向，而是让尺寸关系可预测。很多人卡在“怎么感知横竖屏”，其实该问的是“我真正要约束的是什么”——是宽高比？是最大可用空间？还是内容可见区域？把目标理清，aspect-ratio 才不会变成又一个半途而废的 CSS 新特性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
