CSS 媒体查询高度大于宽度，反之亦然（或如何用 JavaScript 模仿）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10858994/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS media query height greater than width and vice versa (or how to imitate with JavaScript)
提问by Costa
The majority of desktop and laptop screens nowadays have a width greater than the height. The screen is "wide" not "tall." Smart phones have done something rather cool by enabling the orientation of the phone to influence how the content is presented.
现在大多数台式机和笔记本电脑屏幕的宽度都大于高度。屏幕是“宽”而不是“高”。通过使手机的方向影响内容的呈现方式，智能手机已经做了一些很酷的事情。
I'd like to do this with media queries, so that if someone on a mac with a big monitor has their browser window sized so that it's very "tall" (height is greater than width) they would see a header and footer. But if they went fullscreen or "wide" (width is greater than height) they would see a sidebar on the left and maybe also the right.
我想用媒体查询来做到这一点，这样如果有人在带有大显示器的 mac 上将浏览器窗口的大小设置为非常“高”（高度大于宽度），他们就会看到页眉和页脚。但是，如果他们进入全屏或“宽”（宽度大于高度），他们会在左侧看到侧边栏，也可能在右侧看到侧边栏。
I'm trying to take full advantage of wide screens, and orientations and such. How to do this with media queries or javascript?
我正在尝试充分利用宽屏幕和方向等。如何使用媒体查询或 javascript 做到这一点？
采纳答案by sheriffderek
I'm sure you have it by now, but here is an example for others who pass by. Like the previous person said, people should take the time to read this: http://www.w3.org/TR/css3-mediaqueries/
我相信你现在已经有了它，但这里有一个例子供其他路过的人使用。就像前面的人说的，人们应该花时间阅读这个：http: //www.w3.org/TR/css3-mediaqueries/
Now, here is an answer. You can put "landscape" or "portrait" in conjunction with widths and heights in your @media rules. This assumes that height is greater than the width and vice versa. I usually only use min-width and then have a few separate @media rules for those specifically. One example would be landscape: horizontal scroll (desktop) and portrait: regular vertical (tablet/phone )
现在，这是一个答案。您可以在@media 规则中将“横向”或“纵向”与宽度和高度结合起来。这假设高度大于宽度，反之亦然。我通常只使用 min-width ，然后专门为那些设置一些单独的 @media 规则。一个例子是横向：水平滚动（桌面）和纵向：常规垂直（平板电脑/手机）
Those 2 wouldn't do it alone though, you'll need some combinations. I think we can assume your sidebar would be a hindrance on screens smaller than 600px wide.
但是，这两个不会单独完成，您需要一些组合。我认为我们可以假设您的侧边栏在宽度小于 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- note that box-sizing: border-box; is used for padding issues.
这里是一个 jsfiddle- 请注意 box-sizing: border-box; 用于填充问题。
2017 UPDATE
2017年更新
I think most people would use flexbox now: https://jsfiddle.net/sheriffderek/egxcgyyd/
我想现在大多数人都会使用 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..." */
}
}
回答by Mitch Denny
Media Queries are probably going to be your solution here for the modern browsers that support it. You can grab a copy of the documentation from here:
对于支持它的现代浏览器，媒体查询可能会成为您的解决方案。您可以从这里获取文档的副本：
But you might find the following tutorial useful (Google for: Media Queries Tutorial):
但您可能会发现以下教程很有用（Google for: Media Queries Tutorial）：
Once you pick up the basics doing things like hiding elements if the screen falls below a specific resolution:
一旦你掌握了一些基础知识，比如在屏幕低于特定分辨率时隐藏元素：
@media screen and (max-width: 600px)
{
.sidebar
{
display: none;
}
}
Hope this helps.
希望这可以帮助。
