Html 如何在 css 中设置纵向和横向媒体查询？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26861189/
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
How to set portrait and landscape media queries in css?
提问by UI_Dev
Here is my media query:
这是我的媒体查询：
@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : portrait){
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important ;
}
.visible-tablet {
display: inherit !important;
}
.hidden-tablet {
display: none !important;
}
}
@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation : landscape){
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important ;
}
.visible-tablet {
display: inherit !important;
}
.hidden-tablet {
display: none !important;
}
}
@media screen and (max-device-width: 767px) and (orientation: portrait) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
}
@media screen and (max-device-width: 767px) and (orientation: landscape) {
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
}
But in tablet, If it is in landscape mode, this div is showing
但是在平板电脑中，如果处于横向模式，则此 div 正在显示
.visible-tablet {
display: inherit !important;
}
If it is in portrait mode, this div is showing
如果它处于纵向模式，则此 div 显示
.visible-phone {
display: inherit !important;
}
I want this div .visible-tabletto be showing always whenever I switch my tablet to auto-rotate mode(which will be for portrait and landscape)
我希望这个 div .visible-tablet在我将平板电脑切换到自动旋转模式时始终显示（这将用于纵向和横向）
But I used portrait and landscape conditions, but still I am facing this issue. Any comments?
但是我使用了纵向和横向条件，但我仍然面临这个问题。任何意见？
回答by KiV
iPad Media Queries (All generations - including iPad mini)
iPad 媒体查询（所有代 - 包括 iPad mini）
Thanks to Apple's work in creating a consistent experience for users, and easy time for developers, all 5 different iPads (iPads 1-5 and iPad mini) can be targeted with just one CSS media query. The next few lines of code should work perfect for a responsive design.
由于 Apple 致力于为用户创造一致的体验，并为开发人员提供轻松的时间，所有 5 种不同的 iPad（iPad 1-5 和 iPad mini）都可以通过一个 CSS 媒体查询进行定位。接下来的几行代码应该非常适合响应式设计。
iPad in portrait & landscape
iPad 纵向和横向
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}
iPad in landscape
iPad 横屏
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}
iPad in portrait
iPad 竖屏
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }
iPad 3 & 4 Media Queries
iPad 3 & 4 媒体查询
If you're looking to target only 3rd and 4th generation Retina iPads (or tablets with similar resolution) to add @2x graphics, or other features for the tablet's Retina display, use the following media queries.
如果您只想针对第 3 代和第 4 代 Retina iPad（或具有类似分辨率的平板电脑）添加 @2x 图形或平板电脑的 Retina 显示屏的其他功能，请使用以下媒体查询。
Retina iPad in portrait & landscape
纵向和横向的 Retina iPad
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}
Retina iPad in landscape
横屏模式下的 Retina iPad
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}
Retina iPad in portrait
纵向的 Retina iPad
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }
iPad 1 & 2 Media Queries
iPad 1 和 2 媒体查询
If you're looking to supply different graphics or choose different typography for the lower resolution iPad display, the media queries below will work like a charm in your responsive design!
如果您想为较低分辨率的 iPad 显示器提供不同的图形或选择不同的排版，下面的媒体查询将在您的响应式设计中发挥作用！
iPad 1 & 2 in portrait & landscape
iPad 1 和 2 纵向和横向
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */}
iPad 1 & 2 in landscape
iPad 1 和 2 横屏
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */}
iPad 1 & 2 in portrait
iPad 1 和 2 纵向
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ }
Source: http://stephen.io/mediaqueries/
回答by quemeful
It can also be as simple as this.
它也可以像这样简单。
@media (orientation: landscape) {
}
