13

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

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

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

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

4

4 回答 4

25

演示文稿配置有“正常”分辨率，即最初创作演示文稿时使用的分辨率。目前默认设置为 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

});
于 2013-04-24T14:16:43.943 回答
10

你听说过媒体查询吗？这是一种通过 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 技巧

于 2013-01-23T14:14:13.617 回答
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 );
...

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

于 2013-01-23T14:07:33.470 回答
1

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

于 2014-11-16T10:09:57.130 回答