video元素须用wrapper包裹并设flex:1，progress-wrapper需强制appearance:none、vertical-align:middle及微调滑块位置；按钮用gap而非margin，全屏下设min-width/min-height保障热区。
video 元素必须包裹在独立容器里，不能直接当 flex 子项
直接把 <video></video> 放进 display: flex 的父容器中，它会因固有尺寸“锁死” flex-basis，导致 flex: 1 失效、拉伸卡住。常见现象是全屏后进度条不动、音量按钮挤成一条线。
正确做法是用一层 wrapper 包住 video，并让 wrapper 承担 flex 分配职责：
<div class="player-controls">
<button class="btn prev-btn"></button>
<div class="progress-wrapper">
<input type="range" class="progress-bar">
</div>
<button class="btn play-btn"></button>
<button class="btn volume-btn"></button>
</div>
-
.player-controls设display: flex+flex-wrap: nowrap - 所有按钮类元素（
.prev-btn,.play-btn,.volume-btn）统一加flex-shrink: 0 -
.progress-wrapper必须设flex: 1或min-width: 120px，否则小屏下缩到不可见
进度条 input[type="range"] 垂直对齐失效的修复要点
即使父容器设了 align-items: center，<input type="range"> 仍常“沉底”，因为它的默认基线（baseline）和按钮不一致，且浏览器默认样式干扰严重。
必须三步同时做：
- 给
.progress-bar加vertical-align: middle - 强制重置外观：
-webkit-appearance: none+appearance: none - 单独微调轨道高度与滑块位置：
::-webkit-slider-runnable-track设height: 4px，::-webkit-slider-thumb设margin-top: -6px（配合容器height: 28px视觉居中）
全屏状态下 gap 和 margin 的选择陷阱
用 margin 控制按钮间距会导致 flex 分配逻辑被干扰，尤其在全屏拉伸时，各子项实际占用宽度会偏离预期；而 gap 是布局层原生间距，不参与 flex 计算，更稳。
- 优先用
gap: 8px（或12px）替代margin-right类写法 - IE11 不支持
gap，但全屏控制条场景基本可忽略——现代全屏 API（requestFullscreen）本身就不兼容 IE11 - 若需降级，可用
@supports (gap: 1px)包裹 gap 规则，fallback 用margin-inline-end
移动端全屏时按钮热区收缩问题
全屏不等于“大屏安全”：iPhone 竖屏切横屏瞬间、折叠屏展开过程中，视口宽度可能骤降到 375px 甚至更低，此时图标按钮若只靠 font-size 缩放，热区极易跌破 44px 最低触控标准。
- 所有按钮必须设
min-width: 44px+min-height: 44px，哪怕 SVG 图标只有 20px - 禁止用
transform: scale(0.8)压缩按钮——iOS Safari 会同步缩小点击区域 - 空间极度紧张时（如横屏播放器顶部控制条），宁可
display: none隐藏音量按钮，也不要让它缩成无法点击的点
.progress-wrapper）没设 flex: 1 时，它不会随父容器拉伸；而一旦设了，又容易因内部 input 默认样式撑高，导致整体高度失控——所以 appearance: none 和 vertical-align 不是可选优化，是必填项。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
