css 根据纵向或横向屏幕尺寸扩展？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3858466/
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 expanding based on portrait or landscape screen size?
提问by Xtian
I have two divs that are floating next to each other. What i would like is to have it have a width of 100px when you are looking at it in portrait mode and lets say 200 px in landscape. This happens viewing on a mobile device actually.
我有两个彼此相邻浮动的 div。当您在纵向模式下查看它时，我希望它的宽度为 100 像素，而在横向模式下则为 200 像素。这实际上发生在移动设备上观看。
So the div will expand when in landscape mode and shrink up a bit in portrait.
所以 div 在横向模式下会扩大，在纵向模式下会缩小一点。
Any ideas?
有任何想法吗？
回答by Dennis G
Well this is not possible with CSS2, but it would be possible to do what you want with Javascript (read out the screen size etc.).
好吧，这在 CSS2 中是不可能的，但是可以用 Javascript 做你想做的事（读出屏幕大小等）。
I'm not sure what technology you are looking into, but CSS3 provides exactly what you want with CSS3 Media Queries.
我不确定您正在研究什么技术，但 CSS3 提供了您想要的CSS3 Media Queries。
With CSS3 you have fun stuff like this (or you could even specify width e.g. 200px):
使用 CSS3，你可以得到这样有趣的东西（或者你甚至可以指定宽度，例如 200px）：
/* Portrait */
@media screen and (orientation:portrait) {
/* Portrait styles here */
}
/* Landscape */
@media screen and (orientation:landscape) {
/* Landscape styles here */
}
Check out this example pagefor more explanation, or this one.
EDITJust because I found this page today: Hardbroiled CSS3 Media Queries- very good writeup.
编辑只是因为我今天找到了这个页面：Hardbroiled CSS3 Media Queries- 非常好的文章。
回答by kasper Taeymans
You can do this by using the css media feature "orientation". This way you can specify styles depending on screen orientation, unrelated from screen size. You can find the official w3.org definition about this media feature here. Combined with the specifications on developer.mozilla.orgthis will explain how it works.
您可以通过使用 css 媒体功能“方向”来做到这一点。通过这种方式，您可以根据屏幕方向指定样式，与屏幕大小无关。您可以在此处找到有关此媒体功能的官方 w3.org 定义。结合developer.mozilla.org上的规范，这将解释它是如何工作的。
Quote from w3.org about the ‘orientation' media feature:
w3.org 关于“方向”媒体功能的引用：
The ‘orientation' media feature is ‘portrait' when the value of the ‘height' media feature is greater than or equalto the value of the ‘width' media feature. Otherwise ‘orientation' is ‘landscape'.
当“高度”媒体特征的值大于或等于“宽度”媒体特征的值时，“方向”媒体特征为“纵向” 。否则“方向”就是“风景”。
A note/quote from developer.mozilla.org about the "orientation" feature:
developer.mozilla.org 关于“方向”功能的注释/引用：
Note: This value (ie portrait or landscape)does notcorrespond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.
注：此值（即纵向或横向）并没有与实际设备的方向。在大多数设备上以纵向打开软键盘会导致视口变宽而不是高度，从而导致浏览器使用横向样式而不是纵向样式。
So to reiterate, it is not actually the screen orientation that triggers portrait or landscape media queries. However it is the ratio between height and width of the screen! Because of this it also makes sense to use the "orientation feature" with non mobile/tactile devices hence I've added a small demo to show the behaviour of these media queries.
所以重申一下，触发纵向或横向媒体查询的实际上并不是屏幕方向。然而它是屏幕的高度和宽度之间的比率！因此，在非移动/触觉设备上使用“方向功能”也很有意义，因此我添加了一个小演示来展示这些媒体查询的行为。
JSFIDDLE DEMO(try resizing the view port)
JSFIDDLE 演示（尝试调整视口的大小）
Here are the representative media queries affecting portrait and landscape orientation.
以下是影响纵向和横向方向的代表性媒体查询。
@media screen and (orientation:portrait) {
/* Portrait styles */
/*set width to 100px */
}
@media screen and (orientation:landscape) {
/* Landscape styles */
/* set width to 200px*/
}
