blocks|key|1288942|text|如果你看一下托管在github+https://github.com/hakimel/reveal.js/blob/master/js/reveal.js上的源代码，你就能确切地看到它在做什么。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1288943|它检查浏览器CSS功能，如2d和3d转换|1288944|++++//+Detect+support+for+CSS+3D+transforms
supports3DTransforms+=+'WebkitPerspective'+in+document.body.style+%7C%7C
'MozPerspective'+in+document.body.style+%7C%7C
'msPerspective'+in+document.body.style+%7C%7C
'OPerspective'+in+document.body.style+%7C%7C
'perspective'+in+document.body.style|code-block|syntax|javascript|1288945|它使用基本的事件侦听器|1288946|++++//+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+);
...|1288947|源代码实际上有很好的注释，所以你应该能够学到很多。|1288948|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/hakimel/reveal.js/blob/master/js/reveal.js^0|G|1P|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|15|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

If you look at the source code hosted on github <a href="https://github.com/hakimel/reveal.js/blob/master/js/reveal.js" rel="nofollow">https://github.com/hakimel/reveal.js/blob/master/js/reveal.js</a> you can see exactly what it's doing.

It checks for browser CSS features like 2d and 3d transforms

<pre><code> // 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
</code></pre>

It uses basic event listeners

<pre><code> // 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 );
...
</code></pre>

The source code actually has decent commenting so you should be able to learn quite a bit.

blocks|key|408558|text|你听说过媒体查询吗？这是一种通过CSS部署的技术，允许您根据窗口的宽度和高度影响元素的样式。下面是它在reveal.js+https://github.com/hakimel/reveal.js/blob/master/css/reveal.css中的用法|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|408559|@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;
++++}
}|code-block|syntax|javascript|408560|继续阅读：MDN+CSS+Media+Queries|408561|迷你图腾：CSS+Media+Queries+&+Using+Available+Space+%7C+CSS-Tricks|408562|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/hakimel/reveal.js/blob/master/css/reveal.css|1|https://developer.mozilla.org/en-US/docs/CSS/Media_queries|2|http://css-tricks.com/css-media-queries/^0|1P|1R|0|0|0|5|L|1|0|5|1I|2|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|K|3|L|5|6|7|17|8|@]|9|@$A|18|B|19|1|1A]]|C|$]]|$1|M|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]|W|$5|P|Q|R|C|$S|X]]]]

Have you heard of media queries? This is a technique deployed through CSS that allows you to affect the styling of elements based on the width and height of the window. Here is how it's used for reveal.js <a href="https://github.com/hakimel/reveal.js/blob/master/css/reveal.css">https://github.com/hakimel/reveal.js/blob/master/css/reveal.css</a>

<pre><code>@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;
 }
}
</code></pre>

Read On: <a href="https://developer.mozilla.org/en-US/docs/CSS/Media_queries">MDN CSS Media Queries</a>

Mini Tut: <a href="http://css-tricks.com/css-media-queries/">CSS Media Queries &amp; Using Available Space | CSS-Tricks</a>

blocks|key|1289011|text|演示文稿配置为“正常”分辨率，即演示文稿最初创作时所使用的分辨率。当前默认设置为960x700。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1289012|基于该分辨率和由此导出的纵横比，框架将应用CSS2D转换来适应任何屏幕大小的内容。有一些配置值可以控制所有这一切，包括限制框架将在多大程度上缩放您的内容。|1289013|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

});|code-block|syntax|javascript|1289014|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Presentations are configured with a "normal" resolution, meaning the resolution the presentation was originally authored at. This is currently set to 960x700 by default. 

Based on that resolution and the aspect ratio derived from it the framework will apply CSS 2D transforms to fit your content inside of any screen size. There are configuration values to control all of this including limits on how much the framework will ever scale your content.

<pre><code>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

});
</code></pre>

blocks|key|407530|text|Reveal.js还使用zoom属性来控制小宽度的完整幻灯片的大小调整。它会动态地改变zoom属性的值，如果你不断调整窗口的大小，你会注意到这一点。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|407531|entityMap^0|C|4|17|4|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

Reveal.js also uses the <code>zoom</code> property to control the resizing of complete slide on small widths. It dynamically changes the value of <code>zoom</code> property which you can notice if you keep resizing the window.

I am trying to understand how <a href="https://revealjs.com/" rel="nofollow noreferrer"><code>reveal.js</code></a> resizes elements dynamically.

To see this, adjust the height of the page and see how elements (to a certain degree) shrink as the page shrinks.

However, using chrome inspector, I cannot see how this shrinking is actually happening, either in CSS or Javascript.

(My interest comes from wanting to improve it, if possible, but I was surprised how hard it was to figure out how it works at all.)

How does reveal.js resize elements?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我试图理解是如何动态调整元素大小的。要查看这一点，请调整页面的高度，并查看元素(在一定程度上)如何随着页面的收缩而收缩。然而，使用chrome检查器，无论是在CSS还是Javascript中，我都看不到这种收缩是如何发生的。(如果可能的话，我的兴趣来自于想要改进它，但我惊讶地发现，弄清楚它是如何工作的是多么困难。)

问reveal.js如何调整元素的大小？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问reveal.js如何调整元素的大小？EN