字幕清晰度取决于动态适配 devicePixelRatio：用 JS 动态设置根字号（clientWidth/1920×16），::cue 用 rem，禁用 line-height 改用 flex 垂直居中，监听 min-resolution 媒体查询变更，并与 poster 图片共用断点逻辑。

video 的 标签本身不支持分辨率切换

是纯文本轨道，浏览器只负责渲染字幕内容，不感知屏幕尺寸、DPR 或视口宽度。它没有 srcset、sizes 或媒体查询能力，所有样式必须靠 CSS 控制，且默认继承父级 的缩放逻辑——这正是投屏模糊、小屏看不清的根源。

字幕字体大小必须用 rem + 动态根字号适配不同 DPR

固定 font-size: 16px 在 4K 投影仪（devicePixelRatio = 2.5）下会严重发虚；用 vw 单位在多屏拼接时又容易失效。真正可靠的是：

• JS 动态设置 document.documentElement.style.fontSize，基准取设备逻辑宽度（如 clientWidth / 1920 * 16）
• 的 ::cue 伪元素统一用 rem 写字号、行高、边距
• 禁用 line-height 做垂直居中，改用 display: flex; align-items: center 容器包裹字幕层（需自定义字幕容器，绕过原生 ::cue 局限）

响应式字幕位置与背景需监听 devicePixelRatio 变更

从笔记本切到投影仪时，window.devicePixelRatio 可能从 1 突变为 2，但 resize 事件不触发，::cue 样式也不会重算：

生成HTML格式PPT

从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。

下载

• 必须显式监听 matchMedia('(min-resolution: 192dpi)').addEventListener('change', ...)
• 对字幕背景 background-color 加半透明遮罩（如 rgba(0,0,0,0.7)），避免高 DPR 下文字边缘渗色
• 避免 border-radius 小于 1px —— 在 DPR > 1 时会被亚像素渲染成模糊弧线

海报图（poster）和字幕必须共用同一套断点逻辑

切换，和字幕 CSS 断点完全一致

字幕容器（非原生 ::cue）的 font-size 和 padding 必须和 的 media 查询条件严格对齐

别依赖 aspect-ratio 控制字幕区域高度——老版 Safari 和部分 Android WebView 不支持，要用 @supports (aspect-ratio: 1/1) 回退 padding-top 方案

字幕不是“加个 track 就完事”的功能，它的清晰度、可读性、定位稳定性全取决于你是否把 devicePixelRatio 当作第一优先级变量来响应，而不是只盯着视口宽度。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！