css 如何为Gmail编写媒体查询?

btxsgosb  于 2023-02-01  发布在  其他
关注(0)|答案(1)|浏览(151)

我正在尝试为一封电子邮件编写一些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-viewdesktop-view类,但没有成功-所以我尝试在HTML中放置属性。
我哪里做错了?

nwlqm0z1

nwlqm0z11#

这是一个工作示例,在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会去掉style标签。

相关问题