我做了一个关于这个昨天职位。 随着一个答案的帮助下，我学到了一个电子邮件通讯良好的结构。 我应用了这些对我的电子邮件时事通讯。 我还添加了媒体查询代码。 我知道，在所有电子邮件客户端不支持媒体查询。 不过，世卫组织的支持，我想和布局他们一些变化。 不幸的是，媒体查询都没有在我的电子邮件通讯的工作，我不明白是什么原因。 这是视觉的桌面版本的电子邮件 。 这是视觉的移动版电子邮件 。 基本上， 主要区别是在四列 。
- 在移动，将会有两列，而不是四列。
- 随着最后两列将被置于前两米栏的下方，最后两列应该从顶部间距。 因此，上述两列和下面的两列边界（垂直线）不能碰
- 而在桌面版，每列有除最后一个右边框属性。 在移动，第二和第四栏应该没有右边框属性
为了做到这一点，我已经安排我的代码是这样的：
- 有一个在视觉标识下面四列。 基本上，这是两个单独的表中包含的每个两列。 父表的
width="640"。 子表的width="320"的第一个孩子表align="left"于是，两个子表被放置在一排漂亮。 我的打算是使主表的width="320"的移动，所以两个子表不能放置在一排。 - 我已经给
padding-top: 20px第二个孩子表中移动。 因此，该表可以从上面的表中的一些空间。 - 至于，第二和最后一列无权-border属性，我已经呼吁，对于手机类，并给予他们
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设备，我没有任何其他移动设备检查:(
