2

我读过一篇文章，其中建议使用 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、自定义），那么可能我们甚至不需要这种方法并且可以直接使用变量：

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

第二个选项似乎好多了，我错过了什么吗？

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

4

3 回答 3

8

为什么不将这两种方法结合起来呢？像这样的东西：

$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。

于 2012-07-31T10:57:14.363 回答
1

如果用户有可访问性问题并希望在用户代理样式表中设置更大的基本字体，则基于 em 的大小将相应缩放，但基于 px 的大小不会。

于 2012-07-31T09:44:15.617 回答
1

您也可以使用Fluidizer SASS 库。它旨在以像素为单位进行思考，并以灵活的单位获取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)*/
}
于 2012-08-01T14:30:16.520 回答