1920×1080固定舞台原理揭秘：Frontend Slides如何用一段CSS实现全设备完美适配

1920×1080固定舞台原理揭秘：Frontend Slides如何用一段CSS实现全设备完美适配

【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agent's frontend skills项目地址: https://gitcode.com/gh_mirrors/fr/frontend-slides

Frontend Slides 是一个「用编码 Agent 生成网页幻灯片」的开源项目，一句话提示词就能做出零依赖的 HTML 演示文稿。你可能会好奇：这份单一 HTML 文件，为什么没有一行媒体查询，就能在笔记本、平板和手机上都完整显示？答案就藏在一块1920×1080 的固定舞台和一段 CSS 缩放里。👇

为什么幻灯片适配不该用「响应式重排」

普通网页靠媒体查询适配多设备：改字号、换列数、重排内容。但幻灯片天生是固定画布——PowerPoint 和 Keynote 投影到小屏幕上时，都是整体缩小，绝不会重排内容。

Frontend Slides 把这一点写成了最高优先级、不可协商的原则（见 SKILL.md 中的 Fixed 16:9 Stage 规则）：

• 每一张幻灯片都在固定的 1920×1080 画布内编写
• 舞台统一等比缩放至视口，允许出现黑边，禁止重新排版
• 明确禁止用响应式断点为手机重排幻灯片内容

💡 直接收益：不需要逐个屏幕尺寸测试。只要 1920×1080 下是对的，任何设备上都是对的。

三层结构：视口、舞台、幻灯片

整套适配机制都装在强制基础样式 viewport-base.css 里，项目要求每份演示文稿完整引入它。结构只有三层：

核心就是这几行（viewport-base.css）：

.deck-stage { position: absolute; width: 1920px; height: 1080px; overflow: hidden; transform-origin: 0 0; }

舞台内部的一切都以「1920×1080 坐标系」书写——112px 的标题就是真 112px，72px 的留白就是真 72px，写稿时完全不用关心用户屏幕多大。

一行公式完成缩放：transform: scale()

舞台尺寸固定后，如何装进任意窗口？html-template.md 给出的答案只有三行：

const factor = Math.min(window.innerWidth / 1920, window.innerHeight / 1080); const x = (window.innerWidth - 1920 * factor) / 2; this.stage.style.transform = `translate(${x}px, ${y}px) scale(${factor})`;

拆开看，只有三个动作：

1. 取较小比值：宽比和高中取小，保证舞台任何方向都不溢出
2. 整体等比缩放：transform: scale()把整页幻灯片当成一张「图片」压缩
3. 平移居中：剩余空间平分到两侧或上下，形成熟悉的「黑边」效果（letterbox / pillarbox）

13 寸笔记本（约 1280×800）上 factor ≈ 0.56；手机竖屏（约 390×844）上 factor ≈ 0.20——整页缩到五分之一多，但版式和你在 1920×1080 下写的分毫不差。

可复用组件 bold-template-pack/deck-stage.js 里的_fit()实现了同样逻辑，并监听resize事件实时重算——拖拽窗口、旋转屏幕、进出全屏，都平滑跟手。

固定舞台带来的三个「免费福利」

福利一：导出 PDF 几乎零成本

因为舞台尺寸固定，viewport-base.css 的@media print只需做两件事：取消缩放、每页一张幻灯片：

@media print { .slide { width: 1920px; height: 1080px; break-after: page; } }

配合 scripts/export-pdf.sh，按 1920×1080 逐页截图拼合，得到的 PDF 每页一张、零排版漂移。📄

福利二：切页是「藏起来」而不是「销毁」

注意.slide的默认样式用的是visibility: hidden; opacity: 0而非display: none（viewport-base.css）。非当前页的幻灯片始终留在 DOM 里，视频进度、iframe 状态、表单输入都不会在翻页时丢失。🎬

福利三：动效降级一条规则搞定

同一文件末尾还内置了prefers-reduced-motion规则：系统开启「减少动态效果」的用户，所有动画自动降到近乎零时长。固定舞台下，「全局动效回退」只需要一条媒体查询。♿

一点小「代价」，但完全值得

公平地说：固定舞台在手机竖屏下幻灯片显得较小（上下留黑边）。Frontend Slides 刻意接受这个取舍，并用两个交互来补偿：

• 触屏点击区：触屏设备上屏幕分三等份，点左侧回上一页、右侧进下一页，体验类似社交 App 的 Stories
• 键盘优先：方向键、空格、PageUp/Down 翻页，数字键直接跳转，R键回到首页

对演讲场景来说，「所有观众看到同一套版式」远比「占满每一寸屏幕」重要。

自己动手看源码：关键文件速查

总结

Frontend Slides 的「全设备适配」不是靠复杂的响应式技巧，而是靠一个反直觉的简化：不尝试适配每一块屏幕，而是只认真写一次 1920×1080，剩下的交给 CSS transform。固定画布、整体缩放、允许黑边、打印分页——这套和 PPT 相同的思路，被一段 CSS 加三行 JS 完整搬上了 Web。

【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agent's frontend skills项目地址: https://gitcode.com/gh_mirrors/fr/frontend-slides