34

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

我想用媒体查询来做到这一点，这样如果有人在带有大显示器的 Mac 上将浏览器窗口的大小设置为非常“高”（高度大于宽度），他们会看到页眉和页脚。但如果他们进入全屏或“宽”（宽度大于高度），他们会在左侧看到侧边栏，也可能在右侧看到侧边栏。

我正在尝试充分利用宽屏幕和方向等。如何使用媒体查询或 javascript 做到这一点？

4

2 回答 2

26

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

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

但是，这两个不会单独完成，您需要一些组合。我认为我们可以假设您的侧边栏在小于 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
   }

}

这里是一个 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..." */
  }
}
于 2013-04-09T15:40:29.507 回答
3

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

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

希望这可以帮助。

于 2012-06-02T01:06:06.640 回答