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

Question

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

希望对您有所帮助。

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

Using jQuery for responsive design with $(window).width()?

javascript

jquery

if-statement

window

responsive-design