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

【问题标题】：Media queries - not responding on devices媒体查询 - 在设备上没有响应
【发布时间】：2020-09-17 05:26:18
【问题描述】：

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

大家好，

以上是我对代码的媒体查询。此代码用于新闻信函，由于某种原因，媒体查询将无效发送到移动设备。媒体查询中是否缺少某些内容？我用来测试的手机是 iPhone XR。

非常感谢您！

Dom

【问题讨论】：

对我来说，这看起来像是一个过于复杂的媒体查询。当您说“[何时] 发送到移动设备”时，您是什么意思？你的意思是当网站在应用程序的网络视图中被拉起时？在移动浏览器中打开？如果是后者，您尝试过哪些移动浏览器？你想用or 完成什么？更不用说您似乎没有使用 } 正确关闭您的规则。
嗨！谢谢你这么快回复。这是一封从 Thunderbird 发送给校园社区的电子邮件。因此，学生可以在任何设备或任何站点/电子邮件客户端上提取它。我们使用 Gmail 作为我们的电子邮件服务。我在问题中添加了我也使用过的其他媒体查询
@Dom 你不能在电子邮件上使用媒体查询
你最后错过了}。
你最后错过了}。

标签： css media-queries media

【解决方案1】：

请输入此代码并检查。

@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 中的标题。元标记是否存在。如果没有，请把它放在你的脑海里。

&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

【讨论】：

我将您发布的内容添加为@media 查询。这些问题仍然存在。这可能是 Gmail 或内联的问题吗？奇怪的是，移动版的电子邮件通讯在 Dreamweaver 中显示，即使它的屏幕超过了媒体阈值。
如果您写下移动设备的媒体查询，请检查：campaignmonitor.com/dev-resources/guides/mobile

【解决方案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;
    } 
}

成功了吗？

【讨论】：

我删除了 !important 并添加了 }。这导致与以前相同的问题。这些电子邮件的过程是“从 Dreamweaver 复制代码 -> 放入 CSS 内联 -> 使用插入 HTML 粘贴到 Thunderbird 电子邮件中”。
流程没看懂，这个流程是干什么用的？
这是一封发送给校园社区的电子邮件通讯。我们需要时事通讯能够使用@media 查询更改设计。该过程是关于我们如何将电子邮件发送给学生的。
好的。我明白了。
很高兴我的回答对您有所帮助:)

【解决方案3】：

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

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

【讨论】：

当我添加缺少的 } 时，它把代码变成了它在移动设备上的样子，当变成正常分辨率时没有响应。当超过 750 像素阈值时，它仍保持其移动格式。