7

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

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

现在我正在考虑像这样设置基本字体大小：（在整页模式下运行片段，然后调整窗口大小以查看效果）

: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() 我还定义了一个最小值，所以文本不会变得太小。

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

4

3 回答 3

2

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

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

于 2015-12-04T08:20:31.493 回答
0

在跨客户端和设备的 HTML 电子邮件开发中，Px 实际上是唯一一致的字体大小单位声明。（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 属性（或最近测试的摘要或 aria-labelledby 属性）上使用样式，您可以在一定程度上控制 Gmail 的网络邮件版本的布局。

于 2015-12-04T16:57:28.077 回答
0

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

于 2022-01-24T16:06:26.913 回答