如何在CSS中设置纵向和横向媒体查询？

Question

这是我的媒体查询:

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

但在平板电脑中,如果它处于横向模式,则显示此div

 .visible-tablet {
    display: inherit !important;
  }

如果处于纵向模式,则显示此div

.visible-phone {
    display: inherit !important;
  }

.visible-tablet每当我将平板电脑切换到自动旋转模式(这将是纵向和横向)时,我希望这个div 始终显示

但我使用了肖像和风景条件,但我仍然面临着这个问题.任何意见？

Answer 1

iPad媒体查询(所有世代 - 包括iPad mini)

由于Apple致力于为用户创造一致的体验,并为开发人员提供便利的时间,所有5种不同的iPad(iPad 1-5和iPad mini)都可以通过一个CSS媒体查询进行定位.接下来的几行代码应该适用于响应式设计.

iPad的纵向和横向

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES GO HERE */}

iPad在风景中

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */}

iPad在纵向

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

iPad 3和4媒体查询

如果您希望仅针对第3代和第4代Retina iPad(或具有类似分辨率的平板电脑)为平板电脑的Retina显示屏添加@ 2x图形或其他功能,请使用以下媒体查询.

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在风景中

@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 
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媒体查询

如果您希望为较低分辨率的iPad显示屏提供不同的图形或选择不同的排版,下面的媒体查询将像您的响应式设计中的魅力一样!

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在风景中

@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的肖像

@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 */ }

资料来源:http://stephen.io/mediaqueries/

Answer 2

它也可以这么简单.

@media (orientation: landscape) {

}