如何将Reveal.js方向更改为纵向或纵向?
问题描述:
我使用hakimel创建的reveal.js,我想问的一件事是,是否可以将展示方向更改为垂直,以便针对移动进行优化?如何将Reveal.js方向更改为纵向或纵向?
当我使用科尔多瓦时,它运行良好,但是当内容超过其高度时,我看不到下一个内容。我试图破解的CSS,所以它是滚动的,这里是我的CSS:
.scrollable {
margin-top: -200px;
bottom: 0px;
overflow-y: auto !important;
overflow-x: hidden !important;
}
,并将其应用到我的部分元素<section class="scrollable">
,但它仍然是在横向模式下,使顶部和屏幕左侧的底部空白。其如此浪费。
如果没有办法,请向我介绍一些针对移动设备优化的html演示文稿,同时也支持桌面。我一直在谷歌搜索,但仍未找到,或者可能错过了。非常感谢你。
答
当您配置显示时,您可以更改幻灯片分辨率以匹配设备大小,但您必须确保幻灯片可以适应尺寸更改。
要创建充分响应幻灯片:
var resizeSlide = function() {
Reveal.configure({
width: window.innerWidth,
height: window.innerHeight
});
}
setInterval(resizeSlide, 1000);
那么你需要让你的幻灯片内容响应幻灯片格式的变化,但是这会让他们利用整个页面的呈现。 我使用setInterval而不是onResize,因为onResize只是不工作/在移动和一些浏览器/操作系统组合方向变化方面不够可靠