Question

我遇到了Vegas slider的问题，使其完全响应。 An example由框架的作者提供，但它没有显示如何将滑块应用于特定div。

实际上，我想将滑块放在我将用height控制@media的div中。现在，它不会在窗口大小调整时更改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-container元素需要应用以下css。

element.style {
    height: 688px;
}

它覆盖了我为我的conatiner设置的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;
}

如何让Vegas滑块完全响应

2 个答案: