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