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

Вы спите в потоке пользовательского интерфейса, который блокирует дальнейшую обработку (включая обновление экрана).

Если вам нужно задержать некоторый код, вы можете использовать PauseTransition , чтобы подождать в течение двух секунд и использовать его метод onFinished для запуска остальной части вашего кода после ожидания.

0
задан TheGuy445 17 January 2019 в 00:49
поделиться

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>

Надеюсь, что помогает.

0
ответ дан Twisty 17 January 2019 в 00:49
поделиться
Другие вопросы по тегам:

Похожие вопросы: