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

这是我的媒体查询:

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

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)

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

最佳答案

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

由于苹果致力于为用户创造一致的体验,并为开发人员提供了便捷的时间,因此,仅使用一个CSS媒体查询即可定位所有5种不同的iPad(iPad 1-5和iPad mini)。接下来的几行代码对于响应式设计应该是完美的。

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

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

视网膜iPad in纵向和横向

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

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

    公众号
    关注公众号订阅更多技术干货!