可缩放的字体大小,SASS(LESS)与"px"vs普通ems

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.