如何使Vegas滑杆完全响应

Question

我在维加斯（Vegas）滑块上遇到麻烦，无法完全响应。 框架的作者提供了一个示例 ，但没有显示如何将滑块应用于特定的div。

实际上，我想将滑块放在div中，然后使用@media控制height 。 目前，它不会改变窗口调整大小的height （如果我使用父级div的height属性，它的作用也相同。

Answer 1

Vegas插件正在添加内联样式（将高度设置为固定值），该样式将覆盖样式表定义。

尝试在调用vegas()之后添加此代码：

$('.vegas-container').removeAttr('style');

---

但是，插件作者可能出于某种原因添加了内联样式，因此更安全的解决方案可能是更新内联样式的高度而不是删除它。 为此，您可以改为：

$(window).resize(function() {
  if ($('body').width() < 1000)
    $('.vegas-container').height(200);
  else
    $('.vegas-container').height(400);
});

这是假设您有类似<div class="vegasHere"></div>和一些类似CSS的东西

.vegasHere {
  width: 100%;
  height: 200px;
}
@media (min-width: 1000px) {
  .vegasHere {
    height: 400px;
  }
}

Answer 2

我知道已经晚了，但可能对其他人有用。 当我将手机肖像变成风景时，我面临着这个问题。 看起来vegas插件在vegas初始化时设置了高度，并且它是固定的。 屏幕尺寸更改时，此高度未更新。

我已经在调试器中看到vegas-container元素采用了以下CSS。

element.style {
    height: 688px;
}

为我的着色器设置的值超出了我的CSS高度。

my-container-css {
    width: 100%;
    height: 100vh;
    min-height: 100%;
    display: block;
}

高度被覆盖

    element.style {
        height: 688px;
    }

我使我的身高很重要，并且有效。

my-container-css {
    width: 100%;
    height: 100vh !important;
    min-height: 100%;
    display: block;
}