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

我正在创建一个

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()我也定义了一定的最小值,因此文本不会变得太小.

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS实现字号自适应的方式有多种,其比较常见的有以下几种: 1. 使用相对单位:使用相对单位(如em、rem、vw等)来设置字体大小,可以根据浏览器窗口大小自动调整字体大小。例如: ``` body { font-size: 16px; } h1 { font-size: 2em; /* 相当于32px */ } p { font-size: 1.2em; /* 相当于19.2px */ } @media screen and (max-width: 768px) { body { font-size: 14px; } } ``` 上面的代码使用em单位来设置字体大小,h1元素的字体大小为父元素字体大小的2倍,p元素的字体大小为父元素字体大小的1.2倍。同时,使用@media查询来在不同的屏幕尺寸下设置不同的字体大小。 2. 使用viewport单位:使用viewport单位(如vw、vh)来设置字体大小,可以根据浏览器窗口大小自动调整字体大小,而不是根据父元素大小调整。例如: ``` h1 { font-size: 5vw; /* 相当于视口宽度的5% */ } p { font-size: 3vh; /* 相当于视口高度的3% */ } ``` 上面的代码使用viewport单位来设置字体大小,h1元素的字体大小视口宽度的5%,p元素的字体大小视口高度的3%。 3. 使用JavaScript:使用JavaScript来获取浏览器窗口大小,并根据窗口大小动态设置字体大小。例如: ``` function setFontSize() { var screenWidth = window.innerWidth; var fontSize = screenWidth / 20; /* 根据实际情况调整比例 */ document.body.style.fontSize = fontSize + 'px'; } window.addEventListener('resize', setFontSize); setFontSize(); ``` 上面的代码使用JavaScript来获取浏览器窗口大小,并根据窗口大小动态设置字体大小。同时,使用resize事件来在窗口大小变化时重新设置字体大小

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值