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

1920×1080固定舞台原理揭秘Frontend Slides如何用一段CSS实现全设备完美适配【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址: https://gitcode.com/gh_mirrors/fr/frontend-slidesFrontend Slides 是一个「用编码 Agent 生成网页幻灯片」的开源项目一句话提示词就能做出零依赖的 HTML 演示文稿。你可能会好奇这份单一 HTML 文件为什么没有一行媒体查询就能在笔记本、平板和手机上都完整显示答案就藏在一块1920×1080 的固定舞台和一段 CSS 缩放里。为什么幻灯片适配不该用「响应式重排」普通网页靠媒体查询适配多设备改字号、换列数、重排内容。但幻灯片天生是固定画布——PowerPoint 和 Keynote 投影到小屏幕上时都是整体缩小绝不会重排内容。Frontend Slides 把这一点写成了最高优先级、不可协商的原则见 SKILL.md 中的 Fixed 16:9 Stage 规则每一张幻灯片都在固定的 1920×1080 画布内编写舞台统一等比缩放至视口允许出现黑边禁止重新排版明确禁止用响应式断点为手机重排幻灯片内容 直接收益不需要逐个屏幕尺寸测试。只要 1920×1080 下是对的任何设备上都是对的。三层结构视口、舞台、幻灯片整套适配机制都装在强制基础样式 viewport-base.css 里项目要求每份演示文稿完整引入它。结构只有三层类名角色关键样式.deck-viewport视口层占满整个浏览器窗口position: fixed; inset: 0; overflow: hidden.deck-stage设计画布锁死 1920×1080width: 1920px; height: 1080px; transform-origin: 0 0.slide单张幻灯片堆叠在舞台内position: absolute; inset: 0核心就是这几行viewport-base.css.deck-stage { position: absolute; width: 1920px; height: 1080px; overflow: hidden; transform-origin: 0 0; }舞台内部的一切都以「1920×1080 坐标系」书写——112px 的标题就是真 112px72px 的留白就是真 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});拆开看只有三个动作取较小比值宽比和高中取小保证舞台任何方向都不溢出整体等比缩放transform: scale()把整页幻灯片当成一张「图片」压缩平移居中剩余空间平分到两侧或上下形成熟悉的「黑边」效果letterbox / pillarbox13 寸笔记本约 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: noneviewport-base.css。非当前页的幻灯片始终留在 DOM 里视频进度、iframe 状态、表单输入都不会在翻页时丢失。福利三动效降级一条规则搞定同一文件末尾还内置了prefers-reduced-motion规则系统开启「减少动态效果」的用户所有动画自动降到近乎零时长。固定舞台下「全局动效回退」只需要一条媒体查询。♿一点小「代价」但完全值得公平地说固定舞台在手机竖屏下幻灯片显得较小上下留黑边。Frontend Slides 刻意接受这个取舍并用两个交互来补偿触屏点击区触屏设备上屏幕分三等份点左侧回上一页、右侧进下一页体验类似社交 App 的 Stories键盘优先方向键、空格、PageUp/Down 翻页数字键直接跳转R键回到首页对演讲场景来说「所有观众看到同一套版式」远比「占满每一寸屏幕」重要。自己动手看源码关键文件速查想看什么文件位置固定舞台 CSS 完整版viewport-base.css完整 HTML 模板含缩放 JShtml-template.md固定舞台规则与约束SKILL.md可复用舞台组件键盘导航、演讲者备注bold-template-pack/deck-stage.js一键导出 PDF 脚本scripts/export-pdf.sh总结Frontend Slides 的「全设备适配」不是靠复杂的响应式技巧而是靠一个反直觉的简化不尝试适配每一块屏幕而是只认真写一次 1920×1080剩下的交给 CSS transform。固定画布、整体缩放、允许黑边、打印分页——这套和 PPT 相同的思路被一段 CSS 加三行 JS 完整搬上了 Web。【免费下载链接】frontend-slidesCreate beautiful slides on the web using a coding agents frontend skills项目地址: https://gitcode.com/gh_mirrors/fr/frontend-slides创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考