SASS：使电子邮件移动字体大小调整更有效

Question

我正在制作响应式 HTML 电子邮件。当我在移动设备（例如 iPhone）上打开它时，布局是响应式的，但字体很小。

唯一的解决方案似乎是以更大的尺寸重新声明媒体查询中的字体。获得合适的尺寸需要大量的试验和错误。

显然，拥有两组字体声明的维护效率很低，所以我想使用 SCSS 来简化它。

这是我目前拥有的：

h1 {
    font-size: 28px;
    line-height: 36px;
}

h2 {
    font-size: 14px;
    line-height: 18px;
}


@media only screen and (max-device-width: 615px) {
   $increase: 8px;

   h1 {
        font-size: 28px + $increase;
        line-height: 36px + $increase;
    }
    h2 {
        font-size: 14px + $increase;
        line-height: 18px + $increase;
    }

}

这很好，因为我可以更改 $increase 值以使我的移动字体更大。但是，我有超过 20 种字体声明（针对不同的电子邮件），所以如果我更新桌面尺寸（例如，将 h1 从 28px 更改为 32px），我必须更新移动声明，这很耗时。

有什么方法可以使用 SASS 来声明一组字体，然后自动增加移动版本的大小（如果 $increase 值不适合特定风格）。

---

我尝试解决问题的步骤：

1.使用 Rem/Ems： 似乎并非所有桌面浏览器都支持这些。使用 PX 似乎是获得正确尺寸的唯一方法。

2。使用 Scale 元标记：

e.g. <meta name="viewport" content="width=device-width">

这会导致某些移动浏览器显示白屏（黑莓）

Answer 1

你唯一能做的就是使用extends，我提醒你谨慎使用它们，因为它们确实会增加你的CSS：

%size-1 {
  font-size: 1.1em;
}

%size-2 {
  font-size: 1em;
}

@media (min-width: 30em) {
  %size-1 {
    font-size: 1.2em;
  }

  %size-2 {
    font-size: 1.1em;
  }
}

h1 {
  @extend %size-1;
}

h2 {
  @extend %size-2;
}

如果您在没有单位的情况下指定字体大小（例如line-height: 1.5），则每次更改字体大小时都不需要修改行高。

Answer 2

你可以使用rems！首先在 html 元素上使用 font-size:62.5%; 技巧，然后您可以设置多个媒体查询来调整 rems 的大小。

@media only screen and (min-width: 385px) {
    html{font-size:68%;}
}
@media only screen and (max-width: 370px) {
    html{font-size:62.5%;}
}
@media only screen and (max-width: 350px) {
    html{font-size:61%;}
}
@media only screen and (max-width: 330px) {
    html{font-size:59%;}
}

对于不支持 rems 的桌面客户端，您只需将 px 定义放在内联 css（或样式标签）的第一个位置：

font-size:14px;
line-height:16px;
font-size:1.4rem;
line-height:1.6rem;

我目前正在研究一种让 SASS mixin 复制 px 值并将它们转换为 rems 的方法，但由于小数点，这很棘手。如果我完成我会发表评论！或者，如果你打败了我，请告诉我；）