Использование jQuery для адаптивного дизайна с $ (window) .width ()? - PullRequest
Новая
       7

Использование jQuery для адаптивного дизайна с $ (window) .width ()?

0 голосов
/ 17 января 2019

Я пытаюсь сделать отзывчивый 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.

1 Ответ

0 голосов
/ 17 января 2019

Я думаю, вам просто нужно вызвать правильный селектор: 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>

Надеюсь, это поможет.

...