响应式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?

的更多信息

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

这是开发自定义和响应式电子邮件模板的最佳方法。它支持许多电子邮件客户端，例如Yahoo，Gmail，AOL Mail，Outlook，Apple邮件等。。。随笔使用，网上有很多示例。

Answer 2

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

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

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