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

Question

现在大多数台式机和笔记本电脑屏幕的宽度都大于高度。屏幕“宽”而不是“高”。智能手机通过手机的方向来影响内容的呈现方式，做了一些很酷的事情。

我想用媒体查询来做到这一点，这样如果有人在 mac 上使用大显示器将他们的浏览器窗口调整为非常“高”(高度大于宽度)，他们会看到一个标题和页脚。但是，如果他们进入全屏或“宽屏”(宽度大于高度)，他们会在左侧看到一个侧边栏，也可能在右侧看到一个侧边栏。

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

Answer 1

我相信您现在已经知道了，但这里是给路过的其他人的一个例子。就像前面那个人说的，人们应该花时间阅读这个:http://www.w3.org/TR/css3-mediaqueries/

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

虽然这 2 个不能单独完成，您需要一些组合。我认为我们可以假设您的侧边栏在小于 600 像素宽的屏幕上会成为障碍。

/* 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
   }

}

HERE is a jsfiddle - 注意 box-sizing: border-box;用于填充问题。

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..." */
  }
}