How does reveal.js resize elements?

Question

I am trying to understand how reveal.js resizes elements dynamically.

To see this, adjust the height of the page and see how elements (to a certain degree) shrink as the

Answer 1

Presentations are configured with a "normal" resolution, meaning the resolution the presentation was originally authored at. This is currently set to 960x700 by default.

Based on that resolution and the aspect ratio derived from it the framework will apply CSS 2D transforms to fit your content inside of any screen size. There are configuration values to control all of this including limits on how much the framework will ever scale your content.

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

});