媒体查询 - 在设备上没有响应

Question

@media screen (max-width: 750px) or (screen and (max-width: 750px) (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi)) {  
        div.body, div.body div.links, div.body div.links div, div.footer, div.footer div {      
            display: block !important;      
            overflow: hidden !important;
}

另一个版本

@media screen and (max-width: 750px) {  
        div.body, div.body div.links, div.body div.links div, div.footer, div.footer div, table, td, tr{      
            display: block !important;      
            overflow: hidden !important;
        }

大家好，

以上是我对代码的媒体查询。此代码用于新闻信件，出于某种原因，媒体查询将不会影响发送到移动设备。我在媒体查询中遗漏了什么吗？我用来测试的 phone 是 iPhone XR。

非常感谢您！

Dom

Answer 1

在您的两个查询中，您似乎都缺少 }

@media screen (max-width: 750px) or (screen and (max-width: 750px) (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi)) {  
  div.body, div.body div.links, div.body div.links div, div.footer, div.footer div {      
     display: block !important;      
     overflow: hidden !important;
  }
}


@media screen and (max-width: 750px) {  
   div.body, div.body div.links, div.body div.links div, div.footer, div.footer div, table, td, tr{      
      display: block !important;      
      overflow: hidden !important;
   }
}

Answer 2

请删除 !important 并添加 }。也可以像这样使用 @media

@media all and (max-width: 750px) {  
    div.body, div.body div.links, div.body div.links div, div.footer, div.footer div, table, td, tr{      
        display: block;      
        overflow: hidden;
    } 
}

成功了吗？

Answer 3

请输入此代码并检查。

@media only screen and (max-width: 751px) {
   div.body, div.body div.links, div.body div.links div, div.footer, div.footer div, table, td, tr{      
        display: block !important;      
        overflow: hidden !important;
    } 
}

并在 html 中检查您的 header。元标记是否存在。如果没有那么请把它记在脑子里。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

媒体查询 - 在设备上没有响应

Media queries - not responding on devices

css

media

media-queries