响应式 HTML 电子邮件模板

Question

我是一名软件开发人员（主要是前端），所以我习惯于以响应式方式编写代码。

现在我偶然发现了一项创建电子邮件模板的任务，并做了一些研究。 我发现您在实现软件开发中非常基本的事情方面的方法非常有限。

有开发电子邮件模板经验的人能否回答以下问题：

• 能否以响应式方式开发电子邮件（即使用 Bootstrap Grid 列、布局断点等）？我读过一些线程，以支持所有客户我需要使用表格布局。

• 我可以像在普通应用程序中一样使用 CSS 标签吗？（意思是，不仅内联，而且还有单独的样式标签）？

• 对于字体和间距：我可以使用em 或rem 代替像素吗？我想覆盖不使用默认字体布局的屏幕。

• 我找到了一个用于电子邮件的引导库，它似乎可以解决所有这些问题并支持许多电子邮件客户端：https://bootstrapemail.com/。谁能告诉我这是否能解决问题？

Answer 1

1. 能否以响应式方式开发电子邮件（即使用 Bootstrap Grid 列、布局断点等）？

是的，您可以在 HTML 标记中像网页一样使用 bootstarp 类。

<button type="button" class="btn btn-success">Success</button>

1. 我可以像在普通应用程序中一样使用 CSS 标签吗？ （意思是，不仅是内联的， 但也有单独的样式标签）？

是的，您可以使用样式标签进行样式设置，但不确定外部 css。

<style type="text/css">
    body {
        width: 100%;
        background-color: #ffffff;
    }
</style>

1. 对于字体和间距：我可以使用 em 或 rem 代替像素吗？一世 想要覆盖不使用默认字体的屏幕 布局。

在我看来，使用 px 是编写 HTML 电子邮件的最佳方式。您还可以阅读更多关于In email templates, should font-size be in pt or px?

4. 电子邮件模板的引导程序

这是开发自定义和响应式电子邮件模板的最佳方式。它支持许多电子邮件客户端，如 Yahoo、Gmail、AOL 邮件、Outlook、Apple 邮件等...使用的文章和许多在线示例。

Answer 2

• 将 css 用作普通应用程序可能不适用于每个客户端，这是最好的 内联工作，您还可以使用内部 css 在设备上堆叠。
• 像素是电子邮件的最佳选择
• 就个人而言，我从未使用过 Bootstrap 4 电子邮件，但它可以照原样使用 支持大量电子邮件客户端

我添加了支持几乎所有客户端的工作代码。您可以查看代码。希望它能帮助您更好地理解电子邮件！

Here is the link: https://codepen.io/nazifa1022/pen/dxNNBg