Question

我读过一篇文章，建议使用ems单位使字体大小可扩展，以便进行移动开发：

html {
    font-size: 16px; /* our base font size */
}
body {
    font-size: 62.5%; /* now our em = 10px */
}
/* and for example we want to make h1 = 30 pixels */
h1 {
    font-size: 3em; /* target / context = 30 / 10 = 3
}
/* quite ugly in some cases */
h3 {
    font-size: 0.6666666em; /* want 20 pixels, context 30 = 20/30 = 0.(6) */
}

这当然很酷。问题是 - 如果我们使用一些CSS预处理（SASS，LESS，custom），那么我们甚至可能不需要这样的方法并且可以直接使用变量：

$base-font: 10px;
h1 {
    font-size: $base-font*3;
}
h3 {
    font-size: $base-font*2; /* it could be $base-font/3, still nice */
}

第二种选择看起来好多了，我错过了什么吗？

两个选项都有单点改变字体大小的想法，对吧？

Answer 1

为什么不结合这两种方法？像这样：

$base-font: 1em;

html {
    font-size: 16px; /* our base font size */
}
body {
    font-size: 62.5%; /* now our em = 10px */
}

h1 {
    font-size: $base-font*3;
}
h3 {
    font-size: $base-font*2;
}

这样，你保留了em的精确缩放，但你让预处理器完成所有工作都需要很长的数字。正如评论中所讨论的那样，您可以对边距，填充和边框执行相同操作，以使整个元素清晰地缩放，而不仅仅是字体大小。

要看的另一件事可能是rem（root em）。有关详情，请参阅http://snook.ca/archives/html_and_css/font-size-with-rem。

Answer 2

如果用户存在辅助功能问题，并且希望在用户代理样式表中设置更大的基本字体，则基于em的尺寸将相应缩放，但基于px的尺寸不会。

Answer 3

您也可以使用Fluidizer SASS library。它的目标是以像素为单位，以em和percent灵活单位获取值。我是它的开发者，但我认为它可以在你的情况下很好地工作。

这是一个例子。要获得em，请使用所需大小的em()函数作为第一个参数，并使用相应的字体大小（您说的上下文）作为第二个参数。

$initial-rfs: 16px;
html {
    font-size: $initial-rfs;
}
body {
    font-size: em(10px, 16px);
}
h1 {
    font-size: em(30px, 10px);
}
h3 {
    font-size: em(20px, 30px); /*did you said your context was 30px? are you sure? h3 inside h1? I think its context would be better 10px, them em(20px, 10px)*/
}

可缩放的字体大小，SASS（LESS）与“px”vs普通ems

3 个答案: