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
   }

}

HERE is a jsfiddle - 请注意框大小：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..." */
  }
}

Answer 2

媒体查询可能会成为您支持它的现代浏览器的解决方案。您可以从此处获取文档的副本：

http://www.w3.org/TR/css3-mediaqueries/

但您可能会发现以下教程很有用（Google for：Media Queries Tutorial）：

http://webdesignerwall.com/tutorials/css3-media-queries

如果屏幕低于特定分辨率，那么一旦你完成基本操作，就像隐藏元素一样：

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

希望这有帮助。

CSS媒体查询高度大于宽度，反之亦然（或如何用JavaScript模仿）

2 个答案:

2017年更新