可以在移动设备的 HTML 电子邮件中使用 vw（视口宽度）作为字体大小吗

Question

我正在创建一个 HTML 电子邮件模板。桌面版是用表格完成的，内联 css 很少，所有尺寸都以 % 或 px 值定义。

对于移动版本，我使用 div 和 css。现在我想根据视口宽度调整一些文本的大小。因为如果我将某些标题的字体大小定义为 28px，那么某个文本在更宽的设备上可能看起来不错，但在较小的设备上，文本会变大并中断到下一行。

现在我正在考虑像这样设置基本字体大小： （全页模式运行sn -p，然后调整窗口大小看看效果）

:root {
  font-size: calc(8px + 4vw);
}

<h1>
  Header 1
</h1>
<h2>
  Header 2
</h2>
<p>
  Lorem ipsum dolor sit amet, quo eripuit menandri instructior ad, nostro iracundia nam at. Etiam quaerendum vis no. Percipit accommodare ne eum. Alia molestie democritum vix no, natum habemus ei eum, qui ut adhuc partem luptatum.
</p>

像这样，随后的字体大小会根据视口宽度进行缩放，标题在较小的设备上变得更小，从而防止文本中断，或者至少降低了它的可能性。通过使用 calc() 我还定义了一个最小值，所以文本不会变得太小。

现在我的问题是，是否可以将其用于电子邮件（移动），或者移动电子邮件客户端是否严重支持它？浏览器支持不错，但是找不到手机邮件客户端支持的信息。

Answer 1

您好，您可以随时在http://caniuse.com 上检查对 css 属性的支持。我发现了这个：http://caniuse.com/#search=vw，它显示了 iOS 8.4 和 Android 4.4 及更高版本的支持。没那么好，我想很多人还在使用 iOS7（好吧，也许只有我一个人！）。

简而言之，我同意您可能不应该依赖这种技术在任何地方都可以工作。

Answer 2

Px 确实是跨客户端和设备的 HTML 电子邮件开发中唯一一致的字体大小单位声明。 (https://www.campaignmonitor.com/blog/email-marketing/2011/04/should-i-use-em-or-px-when-coding-for-html-email/)。

在移动设计中，较大的文本通常更好，但有时必须缩小标题或其他项目以适应设计。您最好的选择是使用“移动优先”设计创建电子邮件，然后使用媒体查询和 MSO 条件使其扩展到桌面。

超过 50% 的电子邮件是在移动设备 (http://www.emailmonday.com/mobile-email-usage-statistics) 上打开的，而且 Gmail 和许多其他第三方电子邮件应用程序完全剥离了样式标签，因此将默认设置为移动设备更有意义。

还有一些选项可以帮助 Gmail 网络客户端表现得更好。(http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/) 虽然 class 和 id 不起作用，但通过在 lang 属性（或最近测试的 summary 或 aria-labelledby 属性）上使用样式，您可以在一定程度上控制网页版Gmail的布局。

Answer 3

所以 Vh 和 vw 通常非常方便，但是对于电子邮件，它们会在 Outlook 或至少在 windows 版本中碰壁。具有讽刺意味的是，它适用于 Mac。但由于许多人在默认 Outlook 应用程序上接收电子邮件，我认为这没有意义。