Javascript и медиа-запросы

Question

Я хочу добавить какой-нибудь медиа-запрос к JS ниже, чтобы на мобильном телефоне или экране <767px высота только анимировалась до 280px.Также было бы интересно, если это может быть достигнуто с помощью CSS </p>

Javascript

   $("#open").click(function(e){
       e.preventDefault();
        $("div#panel").animate({height: "337px"},"medium");
    });

Большое спасибо

Answer 1

В этой статье описано отличное решение CSS3: http://webdesignerwall.com/tutorials/adaptive-mobile-design-with-css3-media-queries

Этот метод использует медиазапрос CSS: @media screen and (max-width: 767px) { ... }

Имейте в виду, что вам может понадобиться немного креативности в своем решении, если вы решите использовать этот метод. Дайте мне знать, достаточно ли этой информации, или если вы хотите, чтобы я подробно описал, как вы могли бы использовать это для решения вашей проблемы.

========== Редактировать

Вероятно, есть гораздо лучший способ сделать это, но вот о чем я думал ...

CSS:

#panel {
  z-index: 0;
}

@media screen and (max-width: 767px) {
  #panel {
    z-index: 1;
  }
}

JQuery:

$("#open").click(function(e){
  e.preventDefault();
  $("div#panel").css("z-index", 0).animate({height: "337px"},"medium");
  $("div#panel").css("z-index", 1).animate({height: "280px"},"medium");
});