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

Question

我试图理解reveal.js(http://lab.hakim.se/reveal-js/#/)如何动态调整元素大小.

要查看此内容,请调整页面的高度,并查看元素(在某种程度上)在页面缩小时如何缩小.

但是,使用chrome检查器,我无法看到这种缩小是如何实际发生的,无论是在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

});

Answer 2

你听说过媒体查询吗？这是一种通过CSS部署的技术,允许您根据窗口的宽度和高度影响元素的样式.以下是它如何用于reveal.js https://github.com/hakimel/reveal.js/blob/master/css/reveal.css

@media screen and (max-width: 900px), (max-height: 600px) {
    .reveal .slides {
        font-size: 0.82em;
    }
}

@media screen and (max-width: 700px), (max-height: 400px) {
    .reveal .slides {
        font-size: 0.66em;
    }
}

继续阅读:MDN CSS媒体查询

Mini Tut:CSS媒体查询和使用可用空间| CSS-技巧