Question

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

很多人

Answer 1

本条阐述的CSS3解决办法有:。 http://web Designer Wall.com/tutorials/a Adaptation-mobile- Design-with-cs3-media-queries。

这一技术使用CSS媒体查询:@media Screen and (max-width: 767px){。

牢记,如果你选择使用这一方法,你可能不得不在你的解决办法中取得某种创造性。让我知道,这是否足够信息,或者你需要我详细说明你如何利用这些信息解决你的问题。

================================================================================================================================================================================================================================================================ 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;
  }
}

j 质量:

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

友情链接