Question

我正在尝试为电子邮件编写一些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中添加属性。

我做错了什么？

Answer 1

这是一个工作示例。它在Gmail App（v8.3.12）上进行了测试。

＆＃13;

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

＆＃13;

干杯

如何为Gmail编写媒体查询？

1 个答案: