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屬性的值，如果您不斷調整窗口大小，您會注意到這一點。