aspect-ratio 在 chrome 103+ 和 safari 15.4+ 才真正可用，旧版浏览器会忽略该属性导致容器塌陷；需用 @supports 检测并提供 padding-top 降级方案，视频须包裹容器设置 aspect-ratio，避免直接作用于 video 元素，推荐使用分数形式如 16/9，并结合媒体查询或 js 响应横竖屏切换。
aspect-ratio 在 Chrome 103+ 和 Safari 15.4+ 才真正可用
如果你的项目要兼容 Edge 91–102、Firefox 未启用实验性功能、或旧版 iOS Safari，aspect-ratio 会直接被忽略，视频容器塌陷成一条线或撑满父容器。这不是写法错，是浏览器根本不认识这个属性。
实操建议：
- 用
@supports (aspect-ratio: 1/1)包裹样式，把降级方案写在外部（比如基于 padding-top 的“伪 aspect ratio”） - 别只靠
aspect-ratio做唯一布局依据——它不触发重排，但也不阻止子元素溢出；务必配合overflow: hidden或object-fit: cover - 注意 Safari 15.4–16.3 对
aspect-ratio的 flex 子项支持有 bug，如果视频在display: flex容器里，可能宽高比失效，此时换用display: grid更稳
video 元素本身不响应 aspect-ratio，得包一层 div
aspect-ratio 是 CSS 尺寸控制属性，只作用于块级或替换元素的盒模型。而 <video></video> 默认是替换元素（replaced element），但它自身的宽高由 src 视频元数据决定，CSS 的 aspect-ratio 对它无效——你给 <video></video> 直接设 aspect-ratio: 16/9，浏览器会无视。
正确做法是套一层容器：
立即学习“前端免费学习笔记（深入）”；
<div class="video-wrapper"> <video src="demo.mp4" controls></video> </div>
然后对 .video-wrapper 设 aspect-ratio，再让 video 100% 填满它：
.video-wrapper {
aspect-ratio: 16/9;
width: 100%;
}
.video-wrapper video {
width: 100%;
height: 100%;
object-fit: cover;
}宽高比数值写 16/9 还是 1.777？别混用
aspect-ratio 接受两种写法：16/9（推荐）或 1.777（小数）。但两者行为不同：前者是无单位比值，后者是绝对数值，且小数精度一旦不够（比如写成 1.78），在窄屏下容易出现 1px 黑边或裁切。
常见错误现象：用 JS 动态计算比值后拼成字符串塞进 style，结果得到 aspect-ratio: 1.7777777777777777，某些浏览器解析失败回退到默认宽高。
实操建议：
- 永远用分数形式，如
16/9、4/3、21/9；浏览器解析更稳定 - 如果需动态设置（比如从 API 拿到宽高），用
Math.round(w / h * 100) / 100不够，应转为最简整数比（可用gcd函数约分后再拼"${w}/${h}"） - 避免用
calc()套aspect-ratio，比如aspect-ratio: calc(16 / 9)—— 语法非法，直接失效
移动端横竖屏切换时 aspect-ratio 不重算，得手动干预
aspect-ratio 是静态声明，不会随设备方向变化自动切换。比如一个竖屏优先的页面，在 iPhone 上竖屏加载时用了 aspect-ratio: 9/16，用户旋转到横屏，容器仍保持 9:16，导致视频严重变形。
这不是 bug，是设计如此。CSS 层面没有“方向感知”的 aspect-ratio。
实操建议：
- 用媒体查询区分方向：
@media (orientation: portrait)和@media (orientation: landscape)分别定义不同aspect-ratio - 注意 iOS Safari 的 orientation 媒体查询在地址栏收起/展开时也会触发，可能误判；更稳妥的是监听
window.matchMedia("(orientation: ...)"变化并切换 class - 如果用 React/Vue，别只在 mount 时设一次比值，组件需响应
resize或orientationchange事件重新计算容器类名
复杂点在于：有些安卓 WebView 对 orientation 媒体查询支持极差，甚至始终返回 portrait。这种情况下，只能 fallback 到用 window.innerWidth > window.innerHeight 做 JS 判断——但要注意防抖，别每像素 resize 都重算。
