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

• • 现在，**，这里有一个答案。你可以把"landscape"或"portrait"与宽度和高度一起放在你的@media规则中。这里假设高度大于宽度，反之亦然。我通常只使用min-width，然后有几个单独的@media规则专门针对这些规则。一个例子是landscape：水平滚动（桌面）和纵向：常规垂直（平板电脑/手机）

这两个不会单独做到这一点，你需要一些组合。我想我们可以假设你的侧边栏将是一个障碍，在屏幕小于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
   }

}

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

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

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

这是更直观，工作得很好（至少对我来说，因为我想有一个图像的尺寸是基于屏幕的高度大于宽度，反之亦然）。

Media Queries可能会成为您在支持它的现代浏览器中的解决方案。您可以从这里获取文档的副本：
http://www.w3.org/TR/css3-mediaqueries/
但您可能会发现以下教程很有用（Google for：介质查询教程）：
http://webdesignerwall.com/tutorials/css3-media-queries
一旦你学会了一些基本的操作，比如在屏幕福尔斯特定分辨率时隐藏元素：

@media screen and (max-width: 600px)
{
  .sidebar
  {
    display: none;
  }
}

希望这个有用。

如前所述，媒体质询是必经之路。
更具体地说，如果您试图检测视区的高度是否大于宽度 （高度〉宽度），您可以查看aspect ratio文档。
例如，假设您希望根据视区的高或宽隐藏或显示不同的标题，由于1/1的长宽比是一个完美的正方形，您可以使用min-aspect-ratio和max-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点可能会发生一些奇怪的事情，并且两者都是活动的。使用一个查询来检查这个正方形场景可以防止屏幕在它是正方形的情况下不显示任何一个标题。