Question

当屏幕为横向或纵向时，我需要一个div来拥有不同的高度。我会使用媒体查询，但不确定如果设备是手动旋转，那么自动调整div的大小。

到目前为止我有这个但是它似乎没有工作。

<style type="text/css">
  #header {
    position:relative;
    height:100vh;
  }
</style>

<script type="text/javascript">
  $(window).resize(function() {
    if ($(this).height() > $(this).width() {
      $('#header').css("height","50vh"); }
  }
</script>

Answer 1

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) and (orientation : landscape) {
    // styles
}

可以用肖像改变风景。

Answer 2

在开始使用JQuery来设计元素样式之前，可能需要深入研究CSS媒体查询：

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#orientation

Answer 3

您可以在媒体查询中使用横向和纵向方向，并可以实现此目的。

有些事情是这样的。

＆＃13;

@media screen and (orientation: portrait) {
  #header {
    position: relative;
    height: 50vh;
    background-color: blue;
  }
}
@media screen and (orientation: landscape) {
  #header {
    position: relative;
    height: 100vh;
    background-color: red;
  }
}

＆＃13;

<header id="header">
</header>

＆＃13;

根据屏幕方向将CSS应用于div

3 个答案: