Zurb Ink Responsive HTML 电子邮件：增加移动设备上的行高

Question

使用 Zurb 墨水（http://foundation.zurb.com/emails/docs.html）

我为我的电子邮件创建了响应式布局。对于移动设备，尤其是 iPhone，我一直在使用 -webkit-text-size-adjust: 150%; 来增加仅适用于移动设备的字体大小。然而，line-height 没有调整，我得到了更大的字体大小，正如我想要的，但是一些垂直重叠，因为更大的字体仍然有更小的行高。

我试图将此添加到我的 style 标签中：

@media only screen and (max-width: 480px) {
  .body {
    font-size: 16px !important; line-height: 38px;
  }
}

然后 运行 通过 zurb inliner ( http://foundation.zurb.com/emails/inliner.html )

但无济于事。有人知道如何仅在移动设备中增加 HTML 电子邮件的行高吗？

Answer 1

line-height 可能在 px 中定义。将 line-height 语句更改为使用 em 单位。

例如，如果您之前有一个 font-size 的 16px 和一个 line-height 的 20px，您可以将 line-height 更改为 line-height: 1.25em.这将保持与以前相同的行高，但当您在移动设备上更改它时会随字体大小缩放。