13

reveal.js要素のサイズを動的に変更する方法を理解しようとしています。

これを確認するには、ページの高さを調整し、ページが縮小するにつれて要素が (ある程度まで) 縮小する様子を確認します。

ただし、クロム インスペクターを使用すると、CSS または Javascript のいずれかで、この縮小が実際にどのように発生しているかを確認できません。

(私の興味は、可能であれば改善したいということから来ていますが、それがどのように機能するのかを理解するのがいかに難しいかということに驚きました。)

4

4 に答える 4

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;
    }
}

続きを読む：MDNCSSメディアクエリ

Mini Tut：CSSメディアクエリと使用可能なスペースの使用| CSS-トリック

于 2013-01-23T14:14:13.617 に答える
3

github https://github.com/hakimel/reveal.js/blob/master/js/reveal.jsでホストされているソース コードを見ると、それが何をしているかを正確に確認できます。

2D および 3D 変換などのブラウザー CSS 機能をチェックします。

    // 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 also uses the zoom property to control the resizing of complete slide on small widths. It dynamically changes the value of zoom property which you can notice if you keep resizing the window.

于 2014-11-16T10:09:57.130 に答える