首页 文章

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

提问于
浏览 次
0

我正在制作响应式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. Using Rem/Ems: 所有桌面浏览器似乎都不支持这些 . 使用PX似乎是获得正确尺寸的唯一方法 .

2. Using Scale meta tag:

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

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

css fonts sass html-email

2 回答

  • 1

    你可以用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，但由于小数点它很棘手 . 如果我完成，我会发表评论！或者如果你打败我，请告诉我;）

    回复于
  • 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 ），则每次更改字体大小时都不需要修改行高 .

    回复于

相关问题