如何为Gmail编写媒体查询？

Question

如何为Gmail编写媒体查询？

10

我想写一些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 中放置属性。

我做错了什么？

- wariofan1

Gmail对空格非常挑剔。删除min-width:769px之间的空格，并正确使用类，例如：table.desktop-view{display:block;}如果您无法工作，请告诉我，我会提供一个可行的示例。 - Syfer

@Syfer，我尝试了你的建议，但没有成功！如果你能提供一个可行的示例，我将不胜感激。 - wariofan1

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Syfer · Accepted Answer

这里是一个可行的示例。它已在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.5.26.252424914.release（应该在v8.3.12及当前版本之间工作）

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