【发布时间】：2021-01-20 17:53:48
【问题描述】：
我已经构建了一个电子邮件模板，它几乎可以在除 Apple Mail 之外的所有地方完美运行，但我终其一生都无法弄清楚原因。
问题是应该在移动设备上堆叠的一部分列。我通过 Mailchimp 关注 this guide 构建了它们。
这是列的部分：
<table border="0" cellpadding="0" cellspacing="0" id="templateColumns" style="background-color: #ffffff;" width="600">
<tbody>
<tr>
<td align="center" class="templateColumnContainer" valign="top" width="50%">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="leftColumnContent">
<img alt="Placeholder" class="columnImage" src="https://go.frazerconsultants.com/l/43262/2020-08-31/9klwjc/43262/253944/540x400_Placeholder.png" style="font-size: 17; font-family: 'Lato', Helvetica, Arial, sans-serif; line-height: 1.8em; max-width: 280px;" width="280">
</td>
</tr>
<tr>
<td class="leftColumnContent" style="color: #404040;" valign="top">
<h3 style="font-family: 'Lora', Georgia, serif;">Lorem Ipsum Dolor Sit Amet</h3>
<p> </p>
<p style="font-size: 17; font-family: 'Lato', Helvetica, Arial, sans-serif; line-height: 1.8em; margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> </p>
<p><a href="https://frazerconsultants.com/" style="font-size: 17; line-height: 1.8em; font-weight: bold; font-family: 'Lato', Helvetica, Arial, sans-serif; color: #404040; margin: 0; text-decoration: underline;">Read More</a></p>
</td>
</tr>
</tbody>
</table>
</td>
<td align="center" class="templateColumnContainer" valign="top" width="50%">
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tbody>
<tr>
<td class="rightColumnContent">
<img alt="Placeholder" class="columnImage" src="https://go.frazerconsultants.com/l/43262/2020-08-31/9klwjc/43262/253944/540x400_Placeholder.png" style="font-size: 17; font-family: 'Lato', Helvetica, Arial, sans-serif; line-height: 1.8em; max-width: 280px;" width="280">
</td>
</tr>
<tr>
<td class="rightColumnContent" style="color: #404040;" valign="top">
<h3 style="font-family: 'Lora', Georgia, serif;">Lorem Ipsum Dolor Sit Amet</h3>
<p> </p>
<p style="font-size: 17; font-family: 'Lato', Helvetica, Arial, sans-serif; line-height: 1.8em; margin: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p> </p>
<p><a href="https://frazerconsultants.com/" style="font-size: 17; line-height: 1.8em; font-weight: bold; font-family: 'Lato', Helvetica, Arial, sans-serif; color: #404040; margin: 0; text-decoration: underline;">Read More</a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
这是我脑子里的代码，可以让它响应：
@media only screen and (max-width:480px) {
#templateColumns{
width: 100% !important;
}
.templateColumnContainer{
display: block !important;
width: 100% !important;
}
.columnImage{
height: auto !important;
width: 100% !important;
max-width: 580px !important;
}
.leftColumnContent{
font-size: 17px !important;
line-height: 125% !important;
}
.rightColumnContent{
font-size: 17px !important;
line-height: 125% !important;
}
正如预期的那样，由于媒体查询，它在 Gmail 应用上不起作用，这很好。不可能全部赢。
它在 Outlook 应用上运行良好： Outlook App on iOS/iPhone 11
它不适用于 Apple Mail 应用程序： Apple Mail App on iOS/iPhone 11
基本上，右列不会换行，它只是变得超级瘦，并保持在左列旁边。
我不想发布电子邮件的其余代码，因为我觉得这会使事情变得过于复杂，但如果上下文不够，我可以添加更多内容。
编辑添加：
我确实找到了一种错误的方法，它只能通过在媒体查询部分的 ids/classes 前面添加 [data-outlook-cycle] 来使其在 Outlook 应用程序上响应。至少它使它在 Mail 和 Outlook 中都清晰易读，但理想情况下，我希望电子邮件在 Mail 中也能响应。
【问题讨论】：
标签： html css email media-queries responsive