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

【问题标题】：How does reveal.js resize elements?reveal.js 如何调整元素大小？
【发布时间】：2013-01-23 14:03:03
【问题描述】：

我试图了解reveal.js 如何动态调整元素的大小。

要查看这一点，请调整页面的高度并查看元素（在一定程度上）如何随着页面缩小而缩小。

但是，使用 chrome 检查器，我无法看到这种缩小实际上是如何发生的，无论是在 CSS 还是 Javascript 中。

（我的兴趣来自于想要改进它，如果可能的话，但我很惊讶要弄清楚它是如何工作的。）

【问题讨论】：

标签： javascript html css reveal.js

【解决方案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

});

【讨论】：

我提交问题时并非如此。我私下实现了非常类似这样的东西，我应该看看这是否比我自己的代码更好。
有了这段代码，宽度确实在变化。但高度保持不变，无论它的价值是什么。似乎少量只是降低了盒子（在立方体动画中）。这是一个错误吗？
@hakim 非常好！是否可以仅调整图像的缩放方式？（例如，嵌入式图像是否根据设备尺寸以一致的宽度显示？）
我使用 angularjs 来显示reveal.js 的默认模板，但一切看起来都非常小，当我检查幻灯片的属性并且像素大小正确时，配置中的宽度：950 但渲染时大小太小，甚至无法读取内容。如果您知道如何修复它，请告诉我，如果您想看到它，我明天会放一个 plunker。谢谢

【解决方案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 Media Queries

小图：CSS Media Queries & Using Available Space | CSS-Tricks

【讨论】：

事实上，你是对的，也是错的！ :) 'resize' 中不会发生调整大小，因为 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; } }
是的，刚刚找到它并在看到您的评论之前编辑了我的答案。 :)
请参阅@hakim 的回答。他是reveal.js 的创建者。

【解决方案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 );
...

源代码实际上有不错的注释，所以你应该可以学到不少东西。

【讨论】：

我已经阅读了源代码，并在 chrome 检查器中进行了探索。但是，我找不到任何可以调整字体大小的位。在调整大小（布局）上运行的功能上下移动幻灯片，但没有做任何我可以看到的调整大小？
如果我删除了'layout'和'resize'函数的全部内容，并将supports2DTransforms和supports3DTransforms设置为false，那么调整大小仍然会发生。虽然我同意代码的布局很好，但这些不是（令人惊讶的）调整大小的地方！
@Chris Jefferson - 在 CSS github.com/hakimel/reveal.js/blob/master/css/reveal.css 我怀疑它的媒体查询会根据屏幕大小“@media screen and (max-width: 700px),(max-高度：400px)"

【解决方案4】：

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

【讨论】：

我使用 angularjs 来显示reveal.js 的默认模板，但一切看起来都非常小，当我检查幻灯片的属性并且像素大小正确时，配置中的宽度：950 但渲染时大小太小，甚至无法读取内容。如果你知道如何修复它，请告诉我，如果你想看到它，我明天会放一个 plunker。谢谢