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