HTML 电子邮件 - 基于设备的文本响应

Question

我有一个电子邮件模板，效果很完美，但我正在寻求增强它。 目前，电子邮件顶部的导航栏有 4 列文本。为了使其在桌面和移动设备上看起来都不错，字体需要为 13 号。这可以防止移动设备上出现任何奇怪的换行并使导航保持在一行。

是否可以假设桌面上的导航尺寸为 16，然后如果用户使用移动设备，则字体缩小到 13？

请参阅下面的屏幕截图。我相信这可以通过媒体查询和 CSS 实现吗？

提前感谢大家的帮助！

尝试在桌面上使用大字体的文本，并在移动设备上缩小相同的文本。

Answer 1

你可以。

我更喜欢移动优先的方法，因为 Gmail IMAP（Gmail 的一个版本）不支持

<style>

块，而桌面通常支持（或者对于一些非常旧的系统，它们仍然在一条线上，但很小）。

为此，请内联移动样式，然后将最小宽度媒体查询与桌面版 Outlook 替代方案结合使用（Outlook 桌面 Windows 不支持媒体查询，但有内置替代方案）。

<style>@media screen and (min-width: 600px) {
  .changeText {font-size:16px !important;}
}
</style>
<p class="changeText" style="font-size:13px;mso-ansi-font-size:16px;">
  <a href="...">Link 1</a> &nbsp; 
  <a href="...">Link 2</a> &nbsp; 
  <a href="...">Link 3</a> &nbsp; 
  <a href="...">Link 4</a>
</p>