Reveal.js 如何调整元素的大小？

Question

我试图了解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.jshttps://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 技巧

Answer 3

如果您查看托管在 github https://github.com/hakimel/reveal.js/blob/master/js/reveal.js上的源代码，您可以确切地看到它在做什么。

它检查浏览器 CSS 功能，如 2d 和 3d 转换

    // Detect support for CSS 3D transforms
supports3DTransforms = 'WebkitPerspective' in document.body.style ||
'MozPerspective' in document.body.style ||
'msPerspective' in document.body.style ||
'OPerspective' in document.body.style ||
'perspective' in document.body.style

它使用基本的事件监听器

    // Force a layout when the whole page, incl fonts, has loaded
window.addEventListener( 'load', layout, false );
...
/**
* Binds all event listeners.
*/
function addEventListeners() {

window.addEventListener( 'hashchange', onWindowHashChange, false );
window.addEventListener( 'resize', onWindowResize, false );
...

源代码实际上有不错的注释，所以你应该能够学到很多东西。

Answer 4

Reveal.js 还使用zoom属性来控制小宽度上完整幻灯片的大小调整。 它会动态更改zoom属性的值，如果您不断调整窗口大小，您会注意到这一点。