提问人：Nate 提问时间：10/10/2023 更新时间：10/10/2023 访问量：36
HTML 电子邮件 - 基于设备的文本响应
HTML Email - Text responsive based on device
问：
我有一个电子邮件模板，效果很好，但我正在寻求增强它。 目前，电子邮件顶部的导航有 4 列文本。为了使其在桌面和移动设备上看起来都不错，字体需要为 13 号。这样可以防止移动设备上出现任何奇怪的换行符，并使导航保持在一行中。
是否可以假设桌面上的导航大小为 16，然后如果用户使用的是移动设备，则字体会缩小到 13？
请参见下面的屏幕截图。我相信这可以通过媒体查询和 CSS 实现？
提前感谢大家的帮助！
尝试在桌面上为文本使用大字体，并在移动设备上缩小相同的文本。
答：
0赞
Nathan
10/10/2023
#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>
<a href="...">Link 2</a>
<a href="...">Link 3</a>
<a href="...">Link 4</a>
</p>
评论
0赞
Nate
10/13/2023
嗨，内森，谢谢你的洞察力！会把它带到商店，看看我是否可以让它工作。
评论