如何在css中设置纵向和横向媒体查询？ [英] How to set portrait and landscape media queries in css?

问题描述

这是我的媒体查询：

  @media屏幕和（min-device-width：768px） 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屏幕和（最小设备宽度：768像素）和（最大设备宽度：1824像素） $ b .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 ！重要; 
} 
 .visible-desktop {
 display：none！important; 
} 
 .visible-phone {
 display：inherit！important; 
} 
 .hidden-phone {
 display：none！important; 
} 
} 
 @media屏幕和（max-device-width：767px）和（orientation：landscape）{
 .hidden-desktop {
 display：inherit ！重要; 
} 
 .visible-desktop {
 display：none！important; 
} 
 .visible-phone {
 display：inherit！important; 
} 
 .hidden-phone {
 display：none！important; 
} 
} 
  

但在平板电脑中，此div显示

  .visible-tablet {
 display：inherit！important; 
} 
  

如果是纵向模式，此div显示

  .visible-phone {
 display：inherit！important; 
} 
  

我想要这个div .visible-tablet 每当我将平板电脑切换到自动旋转模式（将会用于纵向和横向）时总是显示

但我使用纵向和横向条件，但我仍面临这个问题。任何评论？

解决方案

iPad Media Queries（包括iPad mini的所有世代）

由于苹果为用户创造一致的体验，并为开发人员提供了轻松的时间，所有5个不同的iPad（iPad 1-5和iPad mini）只需一个CSS媒体查询就可以定位。接下来的几行代码应该适用于响应式设计。

iPad in portrait&横向

  @media only screen 
 and（min-device-width：768px）
和（max-device-width：1024px）{/ * STYLES GO HERE * /} 
  

strong> iPad的横向

  @media only screen 
 and（min-device-width：768px ）
和（max-device-width：1024px）
和（orientation：landscape）{/ * STYLES GO HERE * /} 
  

iPad肖像

  screen 
 and（min-device-width：768px）
 and（max-device-width：1024px）
 and（orientation：portrait）{/ * STYLES GO HERE * /} 
  

iPad 3& 4媒体查询

如果您只想指定第三代和第四代Retina iPad（或类似分辨率的平板电脑）添加@ 2x图形，平板电脑Retina显示屏的其他功能，请使用以下媒体查询。

Retina iPad in portrait&横向

  @media only screen 
 and（min-device-width：768px）
和（max-device-width：1024px）
和（-webkit-min-device-pixel-ratio：2）{/ * STYLES GO HERE * /} 
  
 
 
 
  Retina iPad in landscape  
  @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  
  @media only screen 
和-width：768px）
 and（max-device-width：1024px）
 and（orientation：portrait）
 and（-webkit-min-device-pixel-ratio：2）{/ * STYLES GO HERE * /} 
  
  iPad 1& 2媒体查询 
 
 
 
如果您希望为低分辨率iPad显示器提供不同的图形或选择不同的排版，您的回应式设计中的魅力！
 
 
 
  iPad 1& 2在纵向&横向 
  @media only screen 
 and（min-device-width：768px）
和（max-device-width：1024px）
和（-webkit-min-device-pixel-ratio：1）{/ * STYLES GO HERE * /} 
  
  iPad 1& 2在横向  
  @media only screen 
 and（min-device-width：768px）
和（max-device-width：1024px）
 and（orientation：landscape）
 and（-webkit-min-device-pixel-ratio：1）{/ * STYLES GO HERE * } 
  
  iPad 1& 2 in portrait   
  @media only screen 
 and（min-device-width：768px）
和（max-device-width：1024px）
和（orientation：portrait）
和（-webkit-min-device-pixel-ratio：1）{/ * STYLES GO HERE * } 
  
资料来源： http ：//stephen.io/mediaqueries/  
 
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
 .visible-tablet {
    display: inherit !important;
  }
If it is in portrait mode, this div is showing
.visible-phone {
    display: inherit !important;
  }
I want this div  .visible-tablet to be showing always whenever I switch my tablet to auto-rotate mode(which will be for portrait and landscape)

But I used portrait and landscape conditions, but still I am facing this issue. Any comments?
解决方案
iPad Media Queries (All generations - including 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.

iPad in portrait & landscape
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES GO HERE */}
iPad in landscape
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */}
iPad in portrait
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ }
iPad 3 & 4 Media Queries

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.

Retina iPad in portrait & landscape
@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
@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
@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

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 1 & 2 in portrait & landscape
@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
@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
@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/

                        
这篇关于如何在css中设置纵向和横向媒体查询？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！