昨天我发了一篇关于此事的帖子。在一个答案的帮助下，我学会了电子邮件简报的良好结构。我在我的电子邮件简报上申请了这些。我还添加了媒体查询代码。我知道，所有电子邮件客户端都不支持媒体查询。但是，谁支持，我想为他们布局一些改变。不幸的是，媒体查询在我的电子邮件时事通讯中没有用，我无法理解是什么原因。这是desktop version email的视觉效果。这是mobile version email的视觉效果。基本上，主要差异位于四列上。
为此，我以这种方式安排了我的代码：
width="640"。子表的width="320"第一个子表是align="left"因此，两个子表很好地排成一行。我打算将主表width="320"用于移动设备，因此这两个子表不能连续放置。padding-top: 20px提供给移动设备的第二个子表。因此，该表可以从上表中获得一些空间。border: 0; 内部代码：
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<title>Email</title>
<style>
@media only screen and (max-device-width: 480px) {
table[class="mainTable"] {
width: 320px !important;
}
table[class="subTable"] {
padding: 20px 0 0 !important;
}
td[class="noBorder"] {
border: 0 !important;
}
}
</style>
体内代码：
<table width="640" border="0" cellspacing="0" cellpadding="0" class="mainTable" style="margin: 0px auto; font-family: Helvetica, Arial, sans-serif; padding: 35px 0 0;">
<tr>
<td style="font-size: 25px;">
LOGO
</td>
</tr>
<tr>
<td>
<table align="left" width="320" border="0" cellspacing="0" cellpadding="0" style="margin: 0; padding: 0;">
<tr>
<td align="center" valign="top" style="padding: 15px 0 15px; width: 160px; height: 150px; border-right: 1px solid #666;">
<p style="margin: 0; padding: 5px 0 10px;">Remaining</p>
<p style="font-size: 35px; margin: 0 0 20px;">12d, 17hr</p>
<a style="background: #ccc; color: #000; font-weight: bold; text-decoration: none; padding: 5px 10px;" href="#">Visit</a>
</td>
<td align="center" valign="top" class="noBorder" style="padding: 15px 0 15px; width: 160px; height: 150px; border-right: 1px solid #666;">
<p style="margin: 0; padding: 5px 0 10px;">Remaining</p>
<p style="font-size: 35px; margin: 0 0 20px;">12d, 17hr</p>
<a style="background: #ccc; color: #000; font-weight: bold; text-decoration: none; padding: 5px 10px;" href="#">Visit</a>
</td>
</tr>
</table>
<table width="320" border="0" cellspacing="0" cellpadding="0" class="subTable" style="margin: 0; padding: 0;">
<tr>
<td align="center" valign="top" style="padding: 15px 0 15px; width: 160px; height: 150px; border-right: 1px solid #666;">
<p style="margin: 0; padding: 5px 0 10px;">Remaining</p>
<p style="font-size: 35px; margin: 0 0 20px;">12d, 17hr</p>
<a style="background: #ccc; color: #000; font-weight: bold; text-decoration: none; padding: 5px 10px;" href="#">Visit</a>
</td>
<td align="center" valign="top" style="padding: 15px 0 15px; width: 160px; height: 150px;">
<p style="margin: 0; padding: 5px 0 10px;">Remaining</p>
<p style="font-size: 35px; margin: 0 0 20px;">12d, 17hr</p>
<a style="background: #ccc; color: #000; font-weight: bold; text-decoration: none; padding: 5px 10px;" href="#">Visit</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</td>
</tr>
<tr>
<td>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</td>
</tr>
<tr>
<td>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</td>
</tr>
</table>
但是，这对我不起作用。在移动设备上，根据我的代码，我没有看到任何变化。我已经检查过android Gmail应用程序（可能是，它不支持媒体查询）。在那里，四列自动转到两行中的两列，但间距和边框不起作用。我还检查了索尼android默认的电子邮件应用程序（它应该是支持媒体查询）。在那里，没有发生变化！它与桌面显示的方式完全相同。除了Android设备，我没有任何其他移动设备可供检查：（
答案 0 :(得分：0)
由于大量的电子邮件客户端会忽略和/或删除您的代码，因此尝试制作自适应电子邮件仍然是浪费时间和精力。
HTML电子邮件基本上应该像1999年那样使用表格，图像，一些基本的内联样式等进行编码。
如果它必须是响应式的，请尝试从表中移除宽度并允许它们自然响应。
这是关于HTML电子邮件提示的一个很好的资源：
答案 1 :(得分：0)
在前一天发布的答案中（已删除的欺骗），我确定已将您与this basic responsive example相关联。
您尚未应用display:block;切换。您的电子邮件部分应如下所示：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
<style type="text/css">
@media only screen and (max-width: 600px) { .switch { width:100%; display:block; } }
</style>
</head>
<body>
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" class="switch">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" valign="top" style="padding:30px;" bgcolor="#333333">
Cell 1
</td>
<td width="50%" valign="top" style="padding:30px;" bgcolor="#444444">
Cell 2
</td>
</tr>
</table>
</td>
<td width="50%" class="switch">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" valign="top" style="padding:30px;" bgcolor="#555555">
Cell 3
</td>
<td width="50%" valign="top" style="padding:30px;" bgcolor="#666666">
Cell 4
</td>
</tr>
</table>
</td>
</tr>
</table>
</body></html>