Я пытаюсь понять, как open.js(http://lab.hakim.se/reveal-js/#/) динамически изменяет размеры элементов.
Чтобы увидеть это, отрегулируйте высоту страницы и посмотрите, как элементы (в определенной степени) сжимаются при сжатии страницы.
Однако, используя chrome inspector, я не вижу, как это сокращение происходит на самом деле, либо в CSS, либо в Javascript.
(Мой интерес связан с желанием улучшить его, если это возможно, но я был удивлен, как трудно было понять, как он работает вообще.)
Слышали ли вы о медиа-запросах? Это метод, развернутый через CSS, который позволяет вам влиять на стиль элементов на основе ширины и высоты окна. Вот как это используется для show.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
Mini Tut: Запросы CSS и использование доступного пространства | CSS-Tricks
Презентации настроены с "нормальным" разрешением, что означает разрешение, изначально созданное в презентации. По умолчанию этот параметр установлен на 960x700.
Основываясь на этом разрешении и соотношении сторон, полученных из него, структура будет применять преобразования 2D 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
});
Если вы посмотрите на исходный код, размещенный в 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 );
...
Исходный код на самом деле имеет достойный комментарий, поэтому вы должны уметь учиться совсем немного.
Reveal.js также использует свойство zoom для управления изменением размера полного слайда на малой ширине. Он динамически изменяет значение свойства zoom, которое вы можете заметить, если вы изменяете размер окна.