CSS媒体查询高度大于宽度,反之亦然(或如何用JavaScript模仿)

Question

现在大多数台式机和笔记本电脑屏幕的宽度都大于高度.屏幕"宽"而不"高".通过使手机的方向能够影响内容的呈现方式,智能手机做得相当酷.

我想通过媒体查询来做这件事,这样如果某个带有大显示器的Mac上的某个浏览器窗口的大小非常"高"(高度大于宽度),他们就会看到页眉和页脚.但如果他们全屏或"宽"(宽度大于高度),他们会看到左边的侧边栏,也可能是右侧边栏.

我正在尝试充分利用宽屏幕和方向等.如何使用媒体查询或JavaScript进行此操作？

Answer 1

我相信你现在已经拥有它了,但这里有一个例子给其他经过的人.就像上一个人说的那样,人们应该花时间阅读这篇文章:http://www.w3.org/TR/css3-mediaqueries/

现在,这是一个答案.您可以在@media规则中将"横向"或"纵向"与宽度和高度结合使用.这假设高度大于宽度,反之亦然.我通常只使用min-width,然后为那些具有一些单独的@media规则.一个例子是横向:水平滚动(桌面)和肖像:常规垂直(平板电脑/手机)

那些2不会单独做,但你需要一些组合.我认为我们可以假设你的侧边栏会在小于600px宽的屏幕上成为障碍.

/* 01 */
@media (min-width: 0) {
   /* this is the same as not using a media query... */
   .main-content {
     width: 100%;
     float: left;
   }

   .side-bar {
     width: 100%;
     float: left
   }

}


/* 2 */
@media (min-width: 600px) and (orientation:landscape) {

   .main-content {
     width: 70%;
     float: left;
   }

   .side-bar {
     width: 30%;
     float: left
   }

}

这里是一个jsfiddle - 注意盒子大小:边框:用于填充问题.

2017年更新

我想大多数人现在都会使用flexbox:https://jsfiddle.net/sheriffderek/egxcgyyd/

.parent {
  display: flex;
  flex-direction: column;
}

@media (min-width: 600px) and (orientation:landscape) {
  .parent {
    flex-direction: row;
  }
  .child-1 {
    min-width: 260px; /* or flex-basis: xx - try them both */
  }
  .child-2 {
    flex-basis: 100%; /* "if at all possible... please try to be this size..." */
  }
}

Answer 2

我知道这是一个老问题，但我使用的解决方案是：

.main-content {
  /* Default for when the height is greater than the width of the screen*/
  width: var(--content-width-small);
}

@media screen and (min-width: 100vh) {
  /* The width is greater than the height */
  .main-content {
    width: var(--content-width-wide);
  }
}

这更加直观，并且效果非常好（至少对我来说，因为我想要根据屏幕的高度是否大于宽度或反之亦然来获得尺寸的图像）。

Answer 3

如前所述，媒体查询是最佳选择。

更具体地说，如果您尝试检测视口是否高于其宽度（高度 > 宽度），您可以查看宽高比文档。

例如，假设您想根据视口何时高或宽来隐藏或显示不同的标题。由于纵横比是完美的正方形，因此您可以使用和1/1的组合来检测何时发生“高”和“宽”之间的变化。min-aspect-ratiomax-aspect-ratio

代码可能如下所示：

@media (max-aspect-ratio: 1/1) {
  body {
    background-color: cornflowerblue;
  }
 
  .wide {
    display: none;
  }
}

@media (min-aspect-ratio: 1/1) {
  body {
    background-color: whitesmoke;
  }
 
  .tall {
    display: none;
  }
}

@media (aspect-ratio: 1/1) {
  .wide {
    display: block;
  }
}

<div class="wrapper">
  <h1 class="tall">I'm taller than I am wide</h1>
  <h1 class="wide">I'm wider than I am tall</h1>
</div>

不过，有一个警告。您可能已经注意到第三个媒体查询，它检查长宽比是否是完美的正方形。由于媒体查询当前使用最小值和最大值的方式，有一个 1px 点可能会发生一些奇怪的事情，并且两者都处于活动状态。使用检查此完美正方形场景的查询可以防止屏幕在它是完美正方形的情况下不显示任何标题。