Question

我正在尝试使用响应式jQuery，我了解许多人建议使用CSS Media Queries，并且我会尽可能地进行CSS Media Queries，但是我能做的事情非常有限，仅使用CSS Media Queries和/或Boostrap网格已显示其局限性。我在使用$（window）.width（）时遇到麻烦。我已经在网上搜索了答案，并遇到了类似的问题，但是这些并没有解决问题。

这是我的代码：

if ( $(window).width() > 480 && $(window).width() < 768) {
   $("html").css("background-color", "red");
} else {
  $("html").css("background-color", "black");
}

问题在于，当我重新调整浏览器宽度大于480px且小于768px的屏幕时，屏幕仅停留在黑色背景色上，而没有将背景更改为红色。

Answer 1

我认为您只需要调用适当的选择器即可：body对html。考虑以下代码：

$(function() {
  $("body").append("<div class='windowWidth'>Window Width: " + $(window).width() + "px</div>");

  function response() {
    if ($(window).width() > 480 && $(window).width() < 768) {
      $("body").css({
        "background-color": "red",
        color: "black"
      });
    } else {
      $("body").css({
        "background-color": "black",
        color: "white"
      });
    }
  }

  response();

  $(window).resize(function() {
    response();
    $(".windowWidth").html("Window Width: " + $(this).width() + "px");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p>Paragraph in Body</p>
</div>

希望有帮助。

使用jQuery与$（window）.width（）进行响应设计吗？

1 个答案: