css - 可缩放字体大小，SASS (LESS) with "px"vs plain 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、自定义)，那么我们可能甚至不需要这种方法，可以直接使用变量:

$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了解更多。