javascript - 使用 jQuery 通过 $(window).width() 进行响应式设计？

Question

我正在尝试做响应式jQuery，我知道很多人建议使用CSS媒体查询，我尽可能多地做CSS媒体查询，但我能做的事情非常有限，并且只使用CSS媒体查询和/或 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 verus 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>

希望有帮助。