如何在 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;
  }

我希望这个 div .visible-tablet 在我将平板电脑切换到自动旋转模式（用于纵向和横向）时始终显示

但是我使用了纵向和横向条件，但我仍然面临这个问题。有cmets吗？

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) {

}