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;
    }

}

这很好，因为我可以改变$增加值，使我的移动字体更大。但是，我有20多个字体声明（针对不同的电子邮件），所以如果我更新桌面大小（例如将h1从28px更改为32px），那么我必须更新移动声明，这非常耗时。

我有什么方法可以使用SASS来获得一组字体声明，然后自动让移动版本的大小增加（同时如果$ increase值不合适，仍然可以灵活地进行一些自定义覆盖对于特定的风格）。

我试图克服这个问题的步骤：

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

2。使用Scale元标记：

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

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

Answer 1

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

@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，但由于小数点的原因，这很棘手。如果我完成，我会发表评论！或者，如果你打败我，请告诉我;）

Answer 2

你唯一可以做的就是使用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），则每次更改字体大小时都不需要修改行高。

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

2 个答案: