video:fullscreen 宽高设为100vw/100vh没生效，大概率是requestFullscreen()未成功触发，需确保由用户手势同步调用，并通过document.fullscreenElement确认全屏元素再写对应选择器。
video:fullscreen 宽高设为 100vw/100vh 为什么没生效
大概率不是 CSS 写错了，而是 requestFullscreen() 根本没成功触发。浏览器强制要求该 API 必须由用户手势（如 click、touchend）同步调用——不能包在 setTimeout、Promise.then 或任何异步逻辑里。
检查方法很简单：console.log(document.fullscreenElement)。如果输出是 null，说明全屏失败；如果是其他元素（比如 #wrapper），那你就该写 #wrapper:fullscreen，而不是 video:fullscreen。
另外注意：video 元素本身若带 display: none 或 visibility: hidden，进全屏后照样不可见，样式再对也看不到效果。
:fullscreen 选择器必须绑定具体元素，不能单独写
:fullscreen 是伪类，不是独立规则。它必须和一个具体的选择器组合使用，比如 video:fullscreen、#player:fullscreen 或 .modal:fullscreen。单独写 :fullscreen { width: 100vw; } 或 body:fullscreen 在现代浏览器中会被直接忽略。
立即学习“前端免费学习笔记（深入）”；
常见误判场景：
- JS 调用了
document.getElementById('video').requestFullscreen()，但 CSS 写的是.player:fullscreen，而该<video>没有player这个 class - 以为父容器（如
.container）被全屏了，实际只有内部的<video>被调用 —— 那就得用video:fullscreen，不是.container:fullscreen
最可靠做法：始终以 document.fullscreenElement 的返回值为唯一依据，照着它的标签名、ID 或 class 写选择器。
浏览器前缀一个都不能少，拼错就彻底失效
虽然 Chrome 65+、Firefox 64+、Safari 15.4+ 支持无前缀 :fullscreen，但旧版 Safari 和 Firefox 仍需前缀，且语法极其敏感：
-
video:fullscreen—— 标准写法，单冒号 -
video::-webkit-full-screen—— 双冒号 + 两个连字符（-），full-screen中间是短横线，不是fullscreen或Full-Screen -
video::-moz-fullscreen——moz全小写，fullscreen无连字符，不是-moz-full-screen或-moz-fullScreen
别混用：video:fullscreen, video::-webkit-full-screen 这种逗号分隔写法会导致整组规则被浏览器跳过。正确方式是三条独立声明，并列写出。
退出全屏后样式不会自动还原，必须靠基础样式兜底
:fullscreen 是单向覆盖，不是状态开关。你写了 .player:fullscreen { padding: 0; margin: 0; }，退出后这些值不会“回退”，而是保持为 0 —— 如果基础样式里没定义默认值，布局就会错乱。
安全做法是：
- 先写非全屏态的基础样式：
.player { padding: 1rem; margin: 2rem auto; } - 再用
:fullscreen做增量调整：.player:fullscreen { padding: 0; margin: 0; } - 子元素样式必须显式组合：
.player:fullscreen .controls { margin-top: 1.5rem; }，因为:fullscreen不继承、不传播
移动端 iOS Safari 更麻烦：它的视频全屏走系统渲染层，CSS 几乎全部失效。这时候只能靠监听 fullscreenchange 事件，动态加 class 或设内联 style 来兜底。
