video元素直接设aspect-ratio无效，因其是替换元素，固有宽高比由视频元数据决定，css的aspect-ratio对其不生效；必须用外层容器设aspect-ratio并让video填满，同时移除video的width/height属性。
video元素直接设aspect-ratio为什么无效
浏览器会忽略 video 标签上写的 aspect-ratio，这不是你写错了，是规范决定的——video 是替换元素（replaced element），它的固有宽高比由视频文件元数据决定，CSS 的 aspect-ratio 对它不生效。你写 video { aspect-ratio: 16 / 9; }，高度不会变，反而可能因默认 inline 尺寸（约 300×150px）造成首次渲染时严重布局偏移（CLS）。
- 必须用外层容器控制比例，比如
<div class="video-wrapper"><video></video></div> - 容器设
aspect-ratio: 16 / 9+width: 100%，video再填满它 - 删掉
video标签上的width和height属性（如width="640"），它们会覆盖 CSS 控制，加剧抖动
aspect-ratio为什么比padding-top更可靠
padding-top: 56.25% 本质是靠父容器宽度触发子元素高度计算，但一旦父级是 display: flex 或 position: absolute，百分比就失效——它只认父容器宽度，不感知实际渲染尺寸。而 aspect-ratio 是浏览器原生盒模型控制，直接按比例缩放内容区域，不受 flex/grid 布局上下文干扰。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 旧方案在 flex 子项里极易塌陷，新方案只要容器有明确宽度（
width: 100%或max-width），就能稳定预留空间 - 移动端加载时，
aspect-ratio让容器在 DOM 解析阶段就确定尺寸，从根源抑制布局抖动（CLS） - 注意：只写
aspect-ratio: 16/9不设宽度，容器会缩成一条线；必须配width或max-width
Safari 和旧版浏览器的兼容性坑
aspect-ratio 在 Safari 15.4+、Chrome 88+、Firefox 89+ 才真正可用。iOS 15.3 及更早版本、Edge 91–102、未启用实验功能的 Firefox 会直接忽略该属性，导致视频容器塌陷或撑满父容器。
- 必须用
@supports (aspect-ratio: 1 / 1)包裹新样式，降级方案（如padding-tophack）写在外部 - Safari 15.4–16.3 在
display: flex容器中对aspect-ratio支持有 bug，建议改用display: grid或加align-items: start - 分数写法
16 / 9比小数1.777更稳妥，避免解析歧义
全屏轮播和响应式视频的实际宽度怎么选
全屏轮播图用 width: 100vw 能绕过所有父级约束，强制占满视口宽度，但要注意滚动条宽度（通常 ~17px）可能导致横向溢出；而 width: 100% 依赖父容器，若父级有 padding/margin 或被 flex 压缩，轮播图可能窄于视口。
- 推荐：轮播容器用
width: 100vw+overflow-x: hidden到 body 或父容器 - 视频容器优先用
width: 100%，确保根容器无 padding/margin，再靠aspect-ratio控高 - 图片/视频内部必须设
width: 100%; height: 100%; object-fit: cover，否则拉伸或留黑边
aspect-ratio，而是整个链路里——API 是否传宽高、CSS 是否被层叠覆盖、父容器是否意外限制了尺寸、视频是否用了懒加载却没占位——漏掉任意一环，抖动就还在。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
