如何为 Gmail 编写媒体查询？

Question

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

        <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.

我做错了什么？

Answer 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 和当前版本之间运行）

更新 08.02.2022：

最重要的部分是冒号。如果您在媒体查询声明中的冒号前后有空格，Gmail 将去除样式标签。

干杯

如何为 Gmail 编写媒体查询？

How do I write a media query for Gmail?

css

email

gmail

html-email

sendgrid