javascript - reveal.js 如何调整元素的大小？

Question

我正在尝试了解如何 reveal.js动态调整元素大小。

要看到这一点，请调整页面的高度并查看元素如何(在一定程度上)随着页面缩小而缩小。

但是，使用 chrome inspector，我看不到这种缩小实际上是如何发生的，无论是在 CSS 还是 Javascript 中。

(我的兴趣来自于想要改进它，如果可能的话，但我很惊讶弄清楚它是如何工作的是多么困难。)

Answer 1

演示文稿配置为“正常”分辨率，即演示文稿最初创作时所用的分辨率。目前默认设置为 960x700。

基于该分辨率和从中派生的宽高比，框架将应用 CSS 2D 转换以适应任何屏幕尺寸内的内容。有一些配置值可以控制所有这些，包括限制框架将扩展您的内容的程度。

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.1,

    // Bounds for smallest/largest possible scale to apply to content
    minScale: 0.2,
    maxScale: 1.0

});