如何为 Gmail 编写媒体查询？答案

【问题标题】：How do I write a media query for Gmail?如何为 Gmail 编写媒体查询？
【发布时间】：2018-09-16 23:32:48
【问题描述】：

我正在尝试为电子邮件编写一些 HTML/CSS，但无法响应地显示和隐藏内容。我有一张大桌子，有两张嵌套的桌子。每个嵌套表格都是根据屏幕大小隐藏或显示的页脚。这是代码

        <style>
          @media all and (max-width: 768px) {
            table[table-view=desktop] {
              display: none !important;
            }

            table[table-view=mobile] {
              display: block;
            }
          }

          @media all and (min-width: 769px) {
            table[table-view=mobile] {
              display: none !important;
            }

            table[table-view=desktop] {
              display: block;
            }
          }
        </style>

    <some other stuff here>

<table class="module mobile-view" table-view="mobile" border="0" cellpadding="0" cellspacing="0" data-type="code" role="module" style="table-layout: fixed;">
...
</table>

<table class="module desktop-view" table-view="desktop" role="module" data-type="code" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
...
</table>

在 Gmail 中查看此内容时，两个页脚都会出现。使用邮件构建工具（SendGrid）中的预览工具时，效果很好。

我尝试在媒体查询中选择 mobile-view 和 desktop-view 类，但没有奏效 - 所以我尝试将属性放入 HTML。

我做错了什么？

【问题讨论】：

Gmail 对空格真的很挑剔。删除min-width:769px 之间的空格并正确使用类，例如：table.desktop-view{display: block;} 如果您无法工作，请告诉我，我将在其中放入一个工作示例。
@Syfer 我试过你的建议无济于事！如果您能提供一个工作示例，我将不胜感激。

标签： css email gmail html-email sendgrid

【解决方案1】：

这是一个工作示例。已在 Gmail 应用 (v8.3.12) 上测试。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
	<style>
          @media only screen and (max-width:768px)  {
            .desktop-view{display: none !important;}
          }

         @media only screen and (min-width:769px) {
            .mobile-view{display: none !important;}
          }
        </style>
</head>

<body>
	
	

    <some other stuff here>

<table class="module mobile-view" table-view="mobile" border="0" cellpadding="0" cellspacing="0" data-type="code" role="module" style="table-layout: fixed;">
	<tr>
		<td> mobile content here </td>
	</tr>
</table>

<table class="module desktop-view" table-view="desktop" role="module" data-type="code" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;">
	<tr>
		<td> desktop content here </td>
	</tr>
</table>
	
	
	
</body>
</html>

更新：

2019 年 7 月 9 日再次测试，代码仍然有效

适用于版本 2019.5.26.252424914.release（应在 v8.3.12 和当前版本之间工作）

干杯

【讨论】：

谢谢！你有什么见解让它在桌面上也能工作吗？正如你所说，它可以在应用程序中运行，但似乎对 gmail 桌面没有影响
感谢您接受这个答案。快速说明，此媒体查询适用于 Gmail 和其他在其浏览器/客户端中支持媒体查询的电子邮件客户端。它也适用于 Gmail 浏览器。复制上面的代码，发送到您的 gmail 并调整浏览器的大小；-)
@AleksandrMakov 刚刚测试了代码并更新了我的评论。复制粘贴上面的确切代码仍然有效。哪一部分不适合你？
@Syfer，是的，它确实有效。错误在我的代码中。如果存在不受支持的属性，或者值未正确写入 - 它将破坏整个样式块。感谢您仔细检查。
根本不工作！桌面浏览器 (Chrome) 中的 Gmail 会从电子邮件中删除所有的任何 CSS