:fullscreen伪类需先调用element.requestfullscreen()触发全屏才生效，非自动启用；须用户手势触发，且部分浏览器要求allow="fullscreen"；现代浏览器已统一支持无前缀:fullscreen。
fullscreen伪类在Chrome/Firefox里为什么没反应
因为:fullscreen（注意是单冒号）只在元素真正进入原生全屏状态时才生效，不是“设个样式就全屏”，它不触发全屏，只是响应全屏——这点很多人一开始就搞反了。必须先用element.requestFullscreen()触发，浏览器才会给该元素加上:fullscreen匹配上下文。
常见错误现象：div:fullscreen { background: red; }写了但颜色不变；检查发现根本没调过requestFullscreen()，或者调了但被用户拒绝/抛出TypeError: Element.requestFullscreen is not a function（旧版用webkitRequestFullscreen等前缀）。
- 必须由用户手势（如
click、keydown）触发requestFullscreen()，自动调用会被静默忽略 - 部分浏览器（如Safari iOS）不支持
iframe内全屏，或需显式加allow="fullscreen"属性 -
:fullscreen作用于当前全屏的元素本身，不是它的父容器或body
:fullscreen和:-webkit-full-screen写法怎么选
现在可以只写:fullscreen——主流浏览器（Chrome 65+、Firefox 64+、Edge 79+、Safari 15.4+）已统一支持无前缀版本。但如果你还要兼容旧版Safari（:-webkit-full-screen和:-moz-full-screen。
示例实际写法：
video:fullscreen,
video:-webkit-full-screen,
video:-moz-full-screen {
width: 100vw;
height: 100vh;
object-fit: contain;
}
注意：:-webkit-full-screen里的连字符是两个，不是三个；:-moz-full-screen的moz小写；这些前缀规则仅对触发全屏的**那个元素**生效，不继承。
退出全屏后样式没恢复？别漏掉:fullscreen的对立面
:fullscreen只管“在全屏中”的样式，它不会帮你还原退出后的状态。如果全屏时改了font-size或padding，退出后这些值不会自动回退——CSS没有“退出时回调”机制。
正确做法是：把非全屏状态的样式写在常规选择器里，让:fullscreen只做增量覆盖。
- ❌ 错误：只写
.player:fullscreen { padding: 0; }，退出后padding还是0 - ✅ 正确：先定义
.player { padding: 20px; }，再用.player:fullscreen { padding: 0; } - 如果需要更精细控制，可监听
fullscreenchange事件，动态切class，但纯CSS方案更轻量
全屏下fixed定位失效？是因为层级和viewport变化
全屏状态下，position: fixed元素会相对于全屏元素的边界定位，而不是视口——这导致按钮“飘走”或盖不住视频。根本原因是全屏后，浏览器把该元素提升为根层叠上下文，fixed的参照系变了。
解决方法只有两个：
- 改用
position: absolute，并在全屏元素上设position: relative - 用
z-index确保控件在全屏内容之上（注意：全屏元素默认z-index极高，普通z-index可能无效，得配!important或更高值） - 避免依赖
vh/vw单位，全屏时它们仍按原始视口计算，可能错位；改用100%或max-content
这个细节几乎没人提，但线上项目里十有八九会踩一次。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
