我希望在不使用 CSS 媒体查询或 flexbox 的情况下设计一个简单的响应式 HTML 电子邮件模板。我希望电子邮件的中间区域在大屏幕上有两列:
但在小屏幕上只有一列其内容居中:
如果不使用媒体查询,您将如何做到这一点?
最佳答案
我发现实现此目的的最佳方法是在表格内使用 DIV,同时使用 MSO 条件来控制桌面 Outlook 的宽度。
例子:
<!--[if (gte mso 9) | (IE) ]><table width="640"><tr><td align="center"><![endif]-->
<table width="100%" align="center">
<tr>
<td align="center">
<!--[if (gte mso 9) | (IE) ]><table width="100%"><tr><td width="300" align="center"><![endif]-->
<div style="width:300px; display:inline-block; margin:0 auto; text-align:center;">
<table align="center" width="100%">
<tr>
<td class="left" align="center">
<img border="0" src="yourimage.png" width="280" />
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9) | (IE) ]></td><td width="320" align="right"><![endif]-->
<div style="max-width:320px; display:inline-block; margin:0 auto;">
<table align="center" width="100%">
<tr>
<td align="center">Your copy goes here</td>
</tr>
</table></div>
<!--[if (gte mso 9) | (IE) ]></td></tr></table><![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9) | (IE) ]></td></tr></table><![endif]-->
下一个最好的方法是通过 TH 标签:
<!--[if (gte mso 9) | (IE) ]><table width="640"><tr><td align="center"><![endif]-->
<table width="100%" align="center" style="max-width:640px;">
<tr>
<th align="center" width="300" style="display:inline-block;"><img src="yourimage.png"></th>
<th align="center" width="310" style="display:inline-block;">your copy here</th>
</tr>
</table>
<!--[if (gte mso 9) | (IE) ]></td></tr></table><![endif]-->
这两个都有问题,需要不断调整和操作才能使它们正常工作。但是,我发现 TH 解决方案有更多怪癖(例如字体加粗、随机无法解释的边框等),并且比 div/mso 条件选项更不“可定制”。
divs 中的最大宽度在大多数客户端 ( ref ) 中被接受,但 Outlook 桌面除外,它由 MSO 条件句处理。如果您想要进一步控制,您还可以将 div 设置为定义的宽度而不是最大宽度,从而实现更加可控的环境。
关于html - 不使用 CSS 媒体查询的响应式 HTML 电子邮件模板?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38135988/