根本原因是浏览器未进入原生全屏状态，requestfullscreen()必须由用户手势同步触发，且:fullscreen仅作用于被调用的元素；需配合document.fullscreenelement判断、正确书写选择器、处理退出后样式残留及视口变化。
为什么写了:fullscreen样式却没反应
根本原因不是 CSS 写错了，而是浏览器压根没进入「原生全屏状态」——Element.requestFullscreen()必须由用户手势（比如 click）同步触发，不能包在 setTimeout、Promise.then 或异步回调里。自动调用、iframe 嵌套、跨域 iframe、页面未聚焦，都会静默失败，连错误都不抛。
- 用
document.fullscreenElement实时判断是否真进全屏，别只信样式生效 - 在按钮的
onclick里直接调用el.requestFullscreen()，中间不加任何异步包装 - 如果
el是iframe，必须带allow="fullscreen"属性，且同源 - iOS Safari 不支持标准
:fullscreen，只认::-webkit-full-screen；视频类场景得用webkitEnterFullscreen()
:fullscreen选择器必须绑定具体元素，不能泛写
:fullscreen 只作用于调用 requestFullscreen() 的那个 DOM 节点，不会向上冒泡或向下继承。写 body:fullscreen 或 div:fullscreen 几乎总是无效，因为 body 和普通 div 很少被真正全屏。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 正确写法是
video:fullscreen、#player:fullscreen、.modal:fullscreen - 旧版 Chrome/Safari 需
video::-webkit-full-screen（注意双冒号 + 两个连字符），Firefox 是video::-moz-fullscreen（moz全小写） - 不要混用写法，比如
.player:fullscreen, .player::-webkit-full-screen—— 逗号分隔会导致整组失效 - 避免用
:is()或:where()包裹:fullscreen，Safari 某些版本存在解析 bug
全屏后布局错乱？关键不是样式，是视口行为切换
进入全屏后，部分安卓 WebView 或旧版 Chrome 会重置 viewport 渲染逻辑，导致 rem 基准偏移、fixed 定位卡住、文字突然变小——这不是 CSS 错了，是浏览器悄悄换了渲染上下文。
- 在
:fullscreen规则里强制加text-size-adjust: 100%，防 iOS 自动放大文本 - 别用
100vh做高度基准（全屏时地址栏/状态栏隐藏，100vh可能比实际视口还高），改用100dvh（现代浏览器支持）或 JS 动态读取screen.height -
position: fixed在某些 Android 版本下会锁死在旧视口位置，优先用position: absolute+top: 0 -
::backdrop默认透明，要显式设background才可见；它没有 stacking context，别给它设z-index
退出全屏后样式不还原？这是设计问题，不是 bug
:fullscreen 是单向覆盖，不是状态开关。你写了 .player:fullscreen { padding: 0; }，退出后 padding 还是 0，除非你提前定义好基础样式。
- 必须先写基础样式：
.player { padding: 20px; }，再用:fullscreen做增量调整 - 如果依赖样式切换做状态反馈（比如按钮变色），建议配合
fullscreenchange事件手动 toggle class - 自定义遮罩层别依赖
::backdrop，用绝对定位 DOM +pointer-events: none更可控 - F11 全屏或 xgplayer 的
cssFullscreen模式下，document.fullscreenElement为null，:fullscreen完全不触发——这类“伪全屏”得靠 JS 主动标记
document.fullscreenElement 和 CSS 选择器之间的精确匹配关系，以及退出全屏后样式的残留影响。这两个点不处理，调试时会反复陷入“明明写了却没效果”的循环。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
