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の：使用する偉大な@Wex、Imは実際にこれを使用して

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