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

【问题标题】：Using jQuery for responsive design with $(window).width()?使用 jQuery 通过 $(window).width() 进行响应式设计？
【发布时间】：2019-01-17 00:49:42
【问题描述】：

我正在尝试做响应式 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");
}

问题是屏幕仅保持黑色背景色，但当我重新调整浏览器宽度大于 480 像素且小于 768 像素时，不会将背景更改为红色。

【问题讨论】：

欢迎来到 Stack Overflow。你确定你使用了正确的选择器吗？你的意思是$("body").css("background-color", "red"); 和$("body").css("background-color", "black"); 而不是html？

标签： javascript jquery if-statement responsive-design window

【解决方案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>

希望对您有所帮助。

【讨论】：