时间戳

首页 > 解决方案 > 使用 jQuery 通过 $(window).width() 进行响应式设计？

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

问题描述

我正在尝试做响应式 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 像素时，不会将背景更改为红色。

标签： javascriptjqueryif-statementresponsive-designwindow

解决方案

我认为您只需要调用正确的选择器：bodyverus 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>

希望有帮助。

推荐阅读