Javascript和媒体查询 [英] Javascript and media queries

问题描述

我想在下面的JS中添加某种媒体查询，因此在移动电话或屏幕上<767px的高度只能设置为280px.如果使用CSS可以实现这一点，也将很感兴趣

I want to add some kind of media query to the JS below so on mobile or screens <767px the height only animates to 280px. Also would be interested if this can be achieved with CSS

JavaScript

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

非常感谢

推荐答案

本文介绍了一个很棒的CSS3解决方案:

There's a great CSS3 solution that is described in this article: http://webdesignerwall.com/tutorials/adaptive-mobile-design-with-css3-media-queries

此技术使用CSS媒体查询:@media screen and (max-width: 767px) { ... }

This technique uses the CSS media query: @media screen and (max-width: 767px) { ... }

请记住，如果您选择使用此方法，则可能需要在解决方案中增加一些创意.让我知道这是否足够的信息，或者您是否需要我详细说明如何使用此信息来解决您的问题.

Keep in mind that you might have to get a little creative in your solution if you choose to use this method. Let me know if this is enough information, or if you need me to detail how you could use this to solve your problem.

===========编辑

========== Edit

也许有更好的方法可以解决这个问题，但这就是我的想法...

There's probably a much better way to go about this, but here's what I was thinking...

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

这篇关于Javascript和媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！