Question

我有一些基于@media指定的条件CSS，最小宽度和最大宽度用于iPad平板电脑设备。此条件CSS处理div标记，该标记应该覆盖标题元素下面的图像滑块。这在PC上运行良好，但平板电脑上的div标签位于标题下方和图像滑块上方，您必须向下拖动浏览器窗口以查看div，当您释放拖动时，它会快速返回到隐藏在标题下。

下面是CSS，我已经将最小/最大值更改为不同的值以及平板电脑屏幕中的top：元素，但没有运气。我做错了什么？

    @media (min-width: 801px) {
#searchIt {
    position:absolute; 
    top: 25px; 
    z-index:100;
    padding-left:14px;
    padding-right:10px; 
    margin:auto !important; 
    clear:both !important; 
    width:100% !important; 
    max-width:1165px !important;
    }
}

@media only screen 
     (max-device-width: 800px) 
  and (orientation: portrait) { 

  #searchIt {
    position:absolute; 
    top: 250px !important; 
    z-index:100;
    padding-left:14px;
    padding-right:10px; 
    margin:auto !important; 
    clear:both !important; 
    width:100% !important; 
    max-width:1165px !important;
      }

}

/* Landscape */
@media only screen  
     (max-device-width: 800px) 
  and (orientation: landscape) { 

  #searchIt {
    position:absolute; 
    top: 250px !important; 
    z-index:100;
    padding-left:14px;
    padding-right:10px; 
    margin:auto !important; 
    clear:both !important; 
    width:100% !important; 
    max-width:1165px !important;
      }

}

Answer 1

Try this way 
iPad in portrait & landscape

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

iPad in landscape

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

iPad in portrait

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

iPad 3 & 4 Media Queries

If you're looking to target only 3rd and 4th generation Retina iPads (or tablets with similar resolution) to add @2x graphics, or other features for the tablet's Retina display, use the following media queries.
Retina iPad in portrait & landscape

@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 in portrait

@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 Media Queries

If you're looking to supply different graphics or choose different typography for the lower resolution iPad display, the media queries below will work like a charm in your responsive design!
iPad 1 & 2 in portrait & landscape

@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 in landscape

@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 in portrait

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

在Apple平板电脑上忽略基于最小宽度/最大宽度的条件CSS

1 个答案: