演示文稿尺寸
所有演示文稿都具有“常规”的尺寸,即生成它们的解析度。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,
});