javascript - 如何使Vegas滑杆完全响应

我在使用Vegas slider使其完全响应时遇到麻烦。 An example由框架的作者提供，但未显示如何将滑块应用于特定的div。

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

最佳答案

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;
  }
}