jquery - 带背景图片的div，根据屏幕大小设置高度？

Question

我正在构建一个响应式网站。因此，我在使用不同的屏幕尺寸时遇到了一些麻烦。

我为此使用 Twitter Bootstrap 3s 的网格系统，所以一切都是基于百分比的。

例如，我有一个名为“feature1”的框。我已将其设置为 400px，这在较小的屏幕上效果很好。但是，在更大的屏幕上，我希望它能匹配接近屏幕高度的某个位置。

有没有人做到过这个？

我愿意查看 jQuery 替代方案以根据屏幕高度设置高度。

我现在的 CSS 如下:

.feature1 {
background: red;
height: 400px;
}

.feature2 {
background: green;
height: 400px;
}

预先感谢您的帮助。

Answer 1

试试这个

使用 CSS 媒体查询将允许您设置离散宽度

@media (max-width: 979px) and (min-width: 768px) {
  .feature2 {
    height: whatever;
  }
}

在 JQuery 中

$(window).resize(function(){
  windWidth = $(window).width();
  $(".feature2").height(windWidth*.3);
});