reveal.js如何调整元素的大小？
reveal.js如何调整元素的大小？
提问于 2013-01-23 22:03:04
我试图理解reveal.js是如何动态调整元素大小的。
要查看这一点，请调整页面的高度，并查看元素(在一定程度上)如何随着页面的收缩而收缩。
然而，使用chrome检查器，无论是在CSS还是Javascript中，我都看不到这种收缩是如何发生的。
(如果可能的话，我的兴趣来自于想要改进它，但我惊讶地发现，弄清楚它是如何工作的是多么困难。)
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-04-24 22:16:44
演示文稿配置为“正常”分辨率，即演示文稿最初创作时所使用的分辨率。当前默认设置为960x700。
基于该分辨率和由此导出的纵横比，框架将应用CSS2D转换来适应任何屏幕大小的内容。有一些配置值可以控制所有这一切，包括限制框架将在多大程度上缩放您的内容。
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
});Stack Overflow用户
发布于 2013-01-23 22:14:14
你听说过媒体查询吗？这是一种通过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;
}
}迷你图腾：CSS Media Queries & Using Available Space | CSS-Tricks
Stack Overflow用户
发布于 2013-01-23 22:07:33
如果你看一下托管在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 );
...源代码实际上有很好的注释，所以你应该能够学到很多。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14481582
复制相关文章
相似问题
腾讯云开发者
