Javascript和媒體查詢

Question

我想添加一些媒體查詢到下面的JS如此在移動或屏幕< 767px高度只動畫280px。也有興趣，如果這可以用CSS來實現

的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"); 
});