小屏幕上的革命滑块固定高度答案

【问题标题】：Revolutionary Slider fixed height on smaller screens小屏幕上的革命滑块固定高度
【发布时间】：2016-01-16 17:34:30
【问题描述】：

根据屏幕大小改变RS的高度

下面的例子是响应式的，图像高度在小屏幕上很小，例如 320px 宽度或 360px 带屏幕。

http://htmlstream.com/preview/unify-v1.8/page_home2.html

我想为较小的屏幕定义高度并将其保持在最小值，比如 250 像素

<div class="tp-banner revslider-initialised tp-simpleresponsive" id="revslider-192" style="height: 137px;">

我没有找到任何可以将高度保持在min-height:250px的选项

我尝试添加类，但是当屏幕大小改变时，脚本会覆盖它。

RS 没有小屏幕的高度选项

【问题讨论】：

请提供jsfiddle。

标签： jquery html css slider revolution-slider

【解决方案1】：

CSS 支持@media screen and (min-width: 250px){} 或@media screen and (max-width: 250px){} 标签。

这里是JSFiddle（只是改变结果的大小）

RS是否有自己的选择，我不知道。但是如果你可以访问这些文件，你可以很容易地添加一些代码:)

希望对你有帮助

【讨论】：

我试过了，但是当另一封电子邮件显示队列中的下一张图片看起来很小然后调整到自定义高度时，它会破坏设计。
如果您使用window.innerWidth 和window.innerHeight 获得窗口宽度和高度，可能会发生。如果你然后计算你的图像的比例，你可以使用 jQuery 或 JavaScript 来调整它
我现在使用 jquery 的 window.width 来检查和初始化 RS 函数。这解决了问题，但是当我对 window.resize 做同样的事情时，这不会触发函数。
但是为什么要调整窗口大小呢？为什么不让滑块，尤其是图像本身负责，让它们适应（按比例）页面宽度？
我的图片是响应式的，让我们 1920x500 但这些图片在 320 或 360 等小屏幕上看起来非常小。但适合大屏幕

【解决方案2】：

我假设您使用的是旋转滑块 4。我的建议是您下载旋转滑块 5。它以全新的方式处理移动设备。您可以为移动设备、平板电脑、笔记本电脑和宽桌面调整幻灯片的外观，并且可以手动调整每个屏幕的宽度和高度。我在我的几个新滑块上试了一下，效果很好。 Rev5 看起来完全不同，因此您需要花一些时间来学习它，但文档很好，值得您花时间。

希望对你有帮助

【讨论】：