演示大小

¥Presentation Size

所有演示文稿都具有 "normal" 尺寸,即它们创作时的分辨率。reveal.js 会根据正常大小自动均匀缩放演示文稿,以确保所有内容都能适应任何给定的显示器或视口,而不会改变内容的宽高比或布局。

¥All presentations have a "normal" size, that is, the resolution at which they are authored. reveal.js will automatically scale presentations uniformly based on the normal size to ensure that everything fits on any given display or viewport without changing the aspect ratio or layout of your content.

有关尺寸调整的 配置选项 列表(包括其默认值),请参见下文:

¥See below for a list of config options related to sizing, including their default values:

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

幻灯片会根据其包含的内容量在屏幕上垂直居中显示。要禁用此功能并使幻灯片固定在其配置的高度,请将 center 设置为 false

¥Slides are vertically centered on the screen based on how much content they contain. To disable this and leave slides fixed at their configured height set center to false.

Reveal.initialize({ center: false });

嵌入

¥Embedded

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

¥By default, reveal.js will assume that it should cover the full browser viewport. If you want to embed your presentation within a smaller portion of a web page, or show multiple presentations on the same page, you can use the embedded config option.

Reveal.initialize({ embedded: false });

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

¥An embedded presentation will base its size on the dimensions of its .reveal root. If the size of that element changes from a source other than the window resize event, you can call Reveal.layout() to manually trigger a layout update.

// 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% 的可用页面宽度和高度,并将响应式样式留给你。

¥If you want disable the built-in scaling and centering and Bring Your Own Layout, set disableLayout: true. That will make your slides cover 100% of the available page width and height and leave the responsive styling up to you.

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