Javascript和媒體查詢

Question

我想在下面的JS中添加某種媒體查詢，以便在手機或屏幕上<767px的高度僅設置為280px的動畫。 如果這可以通過CSS實現也將感興趣

Java腳本

   $("#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");
});