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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (104)

以下是我的媒体查询:

@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每当我将平板电脑切换到自动旋转模式(这将用于肖像和景观)时,总是显示。

提问于
用户回答回答于
用户回答回答于

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

如果您只想定位第三代和第四代视网膜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 */}

视网膜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 */ }

扫码关注云+社区

领取腾讯云代金券