减少演示文稿顶部的空白 space

Question

我真的很希望能够减少所有 2 级 reveal.js 幻灯片（版本 2.6.2）顶部的填充量。似乎无法使用 CSS 对其进行自定义，因为偏移量是动态计算的负数。

例如在 http://fommil.github.io/scalax14/#/5/1 我想回收顶部至少 200 像素。 top 参数目前计算为 -350px，但我真的希望它更接近 -500px。

有没有办法通过配置来做到这一点？

Answer 1

Reveal 保留您在配置中输入的分辨率的纵横比。

如果你想让你的幻灯片有更少的填充，有多种方法：

禁用居中：

 center: true, // add this in init or config

幻灯片位于页面顶部，所有填充发生在底部

为您的幻灯片使用 4:3 格式

width: 1024, // add this in init or config
height: 768,

这会将所有填充移动到页面的两侧（好吧，假设浏览器 window 未调整大小）只要页面比例大于 4:3

创建完全响应式幻灯片：

var resizeSlide = function() {
   Reveal.configure({
     width: window.innerWidth,
     height: window.innerHeight
   });
}

setInterval(resizeSlide, 1000);

然后您需要让您的幻灯片响应幻灯片格式的变化，但这将使他们利用整个页面进行演示。我使用的是 setInterval 而不是 onResize，因为 onResize 在移动设备和一些 browser/os 组合上不起作用（即 chrome on windows 8.1 当使用键盘快捷键和桌面热点调整 window)

减少演示文稿顶部的空白 space

reduce empty space at the top of presentation

reveal.js