演示文稿尺寸

所有演示文稿都具有“常规”的尺寸,即生成它们的解析度。reveal.js 将自动均匀缩放演示文稿,使其基于常规尺寸以确保其适应任何给定的显示屏或视口,同时不会改变内容的纵横比或布局。

请参阅以下内容,以获得与尺寸相关的配置选项列表,包括其默认值

Reveal.initialize({
  // The "normal" size of the presentation, aspect ratio will
  // be preserved when the presentation is scaled to fit different
  // resolutions. Can be specified using percentage units.
  width: 960,
  height: 700,

  // Factor of the display size that should remain empty around
  // the content
  margin: 0.04,

  // Bounds for smallest/largest possible scale to apply to content
  minScale: 0.2,
  maxScale: 2.0,
});

居中

幻灯片将基于包含的内容在屏幕上垂直居中。要禁用此功能并将幻灯片固定在配置的高度上,请将 center 设置为 false

Reveal.initialize({ center: false });

嵌入

默认情况下,reveal.js 认为它应该覆盖整个浏览器视口。如果你想在一个 web 页面的较小部分中嵌入你的演示文稿,或在同一页上展示多个演示文稿,你可以使用embedded配置选项

Reveal.initialize({ embedded: false });

嵌入的演示文稿会根据其.reveal根的尺寸设定其尺寸。如果该元素的大小因除窗口resize事件外的其他来源而发生变化,你可以调用Reveal.layout()以手动触发布局更新。

// Change the size of our presentation
document.querySelector('.reveal').style.width = '50vw';

// Make reveal.js aware of the size change
Reveal.layout();

BYOL

如果你想禁用内置的缩放和居中功能并自行创建布局,请设置disableLayout: true。这样会使你的幻灯片覆盖可用页面宽度的 100% 和可用页面高度的 100%,并交由你自己定义响应式样式。

Reveal.initialize({
  disableLayout: false,
});