请仔细说明自己遇到的问题,以下是参考模板。这里不要求非得按模板发帖,但内容中包含相关要素能让大家更好地帮助你。
遇到的问题
我经常需要用手机投屏演示,使用的是官方核心插件slide(不是 advanced slides,它好像不支持手机),核心插件slide默认的长宽是900:700,我想修改成16:9,把700改成540。
请问一下怎么改?
预期的效果
用css 代码片段 修改长宽值。
已尝试的解决方案
在ymal直接 width:540 这样好像不行,核心插件的slide似乎不支持这个。
champ
(ckisok)
2
slide核心插件用的是reveal.js库,配置如下:
this.deck = new Reveal(revealEl, {
embedded: true,
keyboardCondition: "focused",
controlsTutorial: false,
overview: false
})
this.deck.initialize()
embedded: true
选项表示幻灯片大小按照其容器尺寸决定(参考官方文档),因此应该不存在默认长宽是900:700一说,不过也可以设置尺寸,你试下用 css 修改 .reveal
类的宽高看看有没有效果。
如下图,.reveal
默认宽高都是100%
,你可以尝试修改这个值看看效果:
2 个赞
1、用css修改 .reveal 的width 和height 有了新问题,铺不满整个屏幕。
2、核心插件slide默认尺寸确实是 900:700,如下:
用下面的方法,修改没有生效:
body{
--slide-width:960px !important;
--slide-heigth:540px !important;
}
3、修改 .slides 的width 和height,也没生效。
.slides {
width: 960px !important;
height: 540px !important;
}
4、下面这样修改也不行
.reveal, .slides {
width: 960px !important;
height: 540px !important;
}
请大佬再指导一下,不胜感激!
champ
(ckisok)
4
翻了下 reveal.js 的文档,这两个变量并不是默认宽高,而是在 Scroll View 模式下才会起作用,可以看下这段css(从 reveal.js 官方扒出来的):
只有在 scroll view 模式中才会在父类出现 .reveal-scroll
类,而 obsidian 中该插件在初始化时并不是这个模式,也就是说,这两个变量在 obsidian 中是无效的。
1 个赞
champ
(ckisok)
5
按照你第一点说的,修改 .reveal
的长宽应该是有效的,官方默认也是100%,铺满容器的,应该没什么问题呀
具体你在手机上演示时的效果是什么样的呢?能否截图看下
在手机上也没有,刚好铺满整个屏,比手机屏幕要大很多。
播放后横屏何和竖屏是这样显示的:
champ
(ckisok)
7
你是不是有什么样式影响了呀,我这边在手机上看没什么问题呀,你把其他插件和样式都关掉看看呢
我开启安全模式,关闭了所有插件。把其它css代码片段,只保留:
.reveal{
width: 960px !important;
height: 540px !important;
}
仍然无法刚好铺满屏。电脑上,只占屏幕的一部分。手机上,屏幕只显示出来整个页面的局部。
champ
(ckisok)
9
不要这段css,这段css会把大小限制成固定的,你应该测试下默认的100%的情况