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始终显示

但是我使用了肖像和风景条件，但我仍然面临着这个问题。有什么意见吗？

Answer 1

iPad媒体查询（所有代 - 包括iPad mini）

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

纵向和iPad的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＆amp; 4媒体查询

如果您希望仅定位第3代和第4代Retina iPad（或具有类似分辨率的平板电脑）来为平板电脑的Retina显示屏添加@ 2x图形或其他功能，请使用以下媒体查询。

Retina iPad in portrait＆amp;景观

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

@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＆amp; 2媒体查询

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

iPad 1＆amp; 2纵向＆amp;景观

@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＆amp; 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＆amp; 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) {

}

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

2 个答案: