Question

我的设计目前在移动设备上看起来非常紧凑，因为字体很大。我的受众群体在台式机和移动阅读器上的比例是50/50。

我是否可以创建自适应字体大小？在移动设备上查看时，我可以将字体大小降低到80％吗？

让我知道这是否可能

我尝试添加以下代码来调整字体，但是并没有让步。

 <style type="text/css">@media only screen and (max-width:480px) {
     @-ms-viewport { width:320px; }
     @viewport { width:320px; }
     body {font-size:80%; }
     }

我希望字体大小按指定的百分比缩小，例如在移动设备上为80％。

Answer 1

要将特定于移动设备的字体大小添加到电子邮件文本中，请使用媒体查询将font-size设置为特定屏幕大小。一种响应性的“流体”方法是使用视口宽度单位（vw）而不是像素。

Viewport-width使用视口宽度的1％作为工作的标准尺寸。例如，iPhone7的viewport-width为750像素，因此1vw为7.5px。在这种情况下，我们将font-size: 2vw设置为15px。这是对屏幕尺寸的响应；当视口变大或变小时，字体将响应。

与font-size一起，我们还需要调整line-height以确保其一致性。在此处试验数字可以得出不同的结果，在上述情况下，line-height:3vw足以确保文本不被压缩。

为确保字体不会太大，我们将其添加到只能在较小视口尺寸下工作的媒体查询中的类。为确保在媒体查询中显示font-size，我们包含!important以覆盖嵌入式字体样式。查看下面的示例代码：

<style type="text/css">
@media screen and (max-device-width:640px), screen and (max-width:640px) {
.mobfont {
font-size: 2vw!important;
line-height: 3vw!important;
}
}
</style>

然后，将类mobfont添加到要调整大小的任何文本中：

<td style=”font-family: ‘Timmana’, Helvetica, Arial, san-serif;” class=”mobfont”>Responsive Text</td>

如果需要，请在此处了解更多信息。 https://www.emailonacid.com/blog/article/email-development/best-font-for-email-everything-you-need-to-know-about-email-safe-fonts

是否可以在电子邮件HTML＆CSS中创建移动响应字体大小？

1 个答案: