Javascript 和媒体查询答案

【问题标题】：Javascript and media queriesJavascript 和媒体查询
【发布时间】：2011-10-15 06:19:58
【问题描述】：

我想在下面的 JS 中添加某种媒体查询，因此在移动设备或

Javascript

   $("#open").click(function(e){
       e.preventDefault();
        $("div#panel").animate({height: "337px"},"medium");
    });

非常感谢

【问题讨论】：

标签： javascript css media-queries

【解决方案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");
});

【讨论】：

谢谢@Wex，我真的在用这个，很好用。虽然我的问题可以在 Javascript 中使用吗？
也许有人可以阐明更好的解决方案，但我添加了一些可能对您有用的东西。