reveal.js如何调整元素大小？ [英] How does reveal.js resize elements?

问题描述

我想了解如何使用reveal.js（ http://lab.hakim.se/reveal-js/ ＃/ ）动态调整元素大小。

I am trying to understand how reveal.js ( http://lab.hakim.se/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.

但是，使用chrome inspector，我无法看到这种缩小是如何发生的，无论是在CSS还是JavaScript。

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.)

推荐答案

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

Have you heard of media queries? This is a technique deployed through CSS that allows you to affect the styling of elements based on the width and height of the window. Here is how it's used for 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 Media Queries&使用可用空间| CSS-Tricks

Mini Tut: CSS Media Queries & Using Available Space | CSS-Tricks

这篇关于reveal.js如何调整元素大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！