Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
190
rated 0 times [  193] [ 3]  / answers: 1 / hits: 16773  / 12 Years ago, wed, january 23, 2013, 12:00:00

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 page shrinks.



However, using chrome inspector, I cannot see how this shrinking is actually happening, either in CSS or Javascript.



(My interest comes from wanting to improve it, if possible, but I was surprised how hard it was to figure out how it works at all.)


More From » html

 Answers
77

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

});

[#80675] Tuesday, January 22, 2013, 12 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
isaacvalentinn

Total Points: 325
Total Questions: 120
Total Answers: 131

Location: North Korea
Member since Tue, Jun 16, 2020
4 Years ago
isaacvalentinn questions
Mon, Jan 18, 21, 00:00, 3 Years ago
Mon, Nov 23, 20, 00:00, 4 Years ago
Wed, Sep 23, 20, 00:00, 4 Years ago
;