0

我创建了一个使用两列布局的电子邮件模板。这是我的方法：

<table>
    <tr>
      <td colspan="2" align="center">
          <h1>Header of my email template</h1>
      </td>
    </tr>
    <tr>
        <td>
            <img src="image1.jpg" alt="Image 1" />
        </td>
        <td>
            <img src="image2.jpg" alt="Image 2" />
        </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
          <p>Footer of my email template</p>
      </td>
    </tr>
</table>

它在桌面上工作得很好！我有一个完全符合我要求的两列布局。问题出在手机上，因为屏幕对于两列布局来说太小了。对于移动设备，我每行需要一张图片，而不是两张。我可以做的是使用包含图像float:left;width:100%的<td>元素，这样我就有了我需要的一列布局。但是，这float:left;width:100%应该仅适用@media screen and (max-width:450px)于例如。但是没有办法@media screen and (max-width:450px)使用内联 CSS。请记住，这是一个电子邮件模板。因此，我无法调用外部 CSS 文件或将 CSS 添加到<head>页面，因为这是为电子邮件模板发送的代码。

我在https://kb.benchmarkemail.com/using-css-in-html-emails/找到了这个建议，但这不是响应式表格的解决方案：

要做的事情

使用表格进行布局。更一致地支持表格。我们建议您将 CSS 代码内嵌到您的内容中。它应该看起来像这样： 您的内容在这里.... 声明所有表格和表格单元格的宽度、单元格填充和单元格间距。这将导致模板的固定宽度。使用 hspace 和 vspace 标签属性在图像周围添加空格。大多数但不是所有电子邮件客户端都支持边距和填充内联样式

有任何想法吗？谢谢你。

4

2 回答 2

1

谷歌提供 CSS 支持：https ://developers.google.com/gmail/design/css正如 A. Meshu 在他对我的问题的评论中指出的那样。

我在 https://templates.mailchimp.com/development/responsive-email/发现他们这样说：

“您可以在<head>电子邮件中保留媒体查询样式，因为支持媒体查询的客户端不会删除<head>or <style>区域。”

这让我觉得我必须发送一份完整的<HTML>文件，所以我什至包括了<html><head><style type="text/css">..........</style></head><body>...........</body></html>.

对于我的其他电子邮件模板，我只需发送<body>. 我以 a 开始模板，<div>一切正常。但是对于这个模板，我现在使用这个结构：

<html>
<head>
<style type="text/css">
@media screen and (max-width:450px) {
    .responsive {
        float:left!important;
        width:100%!important
    }
}
</style>
</head>
<body>
..........
</body>
</html>

感谢 A. Meshu 在他对我的问题的评论中提供了非常重要的提示来解决这个问题。

于 2020-04-03T17:01:19.120 回答
0

由于table元素是块级的，我会说将这些tds 更改为嵌套table的 s 就像 1999 年一样，然后float第一个离开：

<table>
    <tr>
      <td colspan="2" align="center">
          <h1>Header of my email template</h1>
      </td>
    </tr>
    <tr>
        <td>
            <table style="float:left;">
                <tr>
                    <td>
                        <img src="image1.jpg" alt="Image 1" />
                    </td>
                </tr>
            </table>
            <table>
                <tr>
                    <td>
                    <img src="image2.jpg" alt="Image 2" />
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
          <p>Footer of my email template</p>
      </td>
    </tr>
</table>
于 2020-04-02T21:58:37.620 回答