当前位置:  开发笔记 > 前端 > 正文

在移动设备的HTML电子邮件中使用vw(视口宽度)的字体大小是否可以

如何解决《在移动设备的HTML电子邮件中使用vw(视口宽度)的字体大小是否可以》经验,为你挑选了0个好方法。

我正在创建一个HTML电子邮件模板.桌面版本使用表格,几个内联css,所有大小都以%或px值定义.

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

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

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

Header 1

Header 2

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.

像这样,随后的字体大小根据视口宽度进行缩放,标头在较小的设备上变小,防止文本中断,或者至少使其不太可能.通过使用calc()我也定义了一定的最小值,因此文本不会变得太小.

现在我的问题是,将它用于电子邮件(移动)是否可以,或者是否受到移动电子邮件客户端的严重支持?浏览器支持非常好,但我找不到有关移动电子邮件客户端支持的任何信息.

推荐阅读
Chloemw
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有