如何使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;
}