我应该在 body 或 html 元素上设置默认字体大小吗？

Question

我喜欢在创建网站时在ems 工作。因此，我在 body 元素上设置了 100.01% 的默认 font-size。

我的问题是我应该在body 或html 元素上设置默认font-size 吗？两者的优缺点（如果有的话）是什么？

Answer 1

现在rem 单元开始流行，建议在根元素（html 标记）上设置基本字体大小（rem 代表 root em）。

Answer 2

我认为在html 或body 上设置基础font-size 以允许使用ems 调整大小没有任何优势或劣势；它们都会产生相同的效果。

与问题无关：

不过，我建议使用不同的默认 font-size。我会将其设置为：

body {
    font-size: 62.5%;
}

这样做会将默认的font-size 从16px 减少到10px。这使得选择font-size 变得更加容易，因为不需要进行复杂的计算。这意味着1em 等于10px，因此计算px 的大小只需乘以10：

• 1.0em = 10px
• 1.4em = 14px
• 1.8em = 18px
• 2.2em = 22px

Answer 3

如果你真的想遵守规则并且仍然保持灵活性，你应该考虑这个：

• html 的字体大小是 root 字体大小，这意味着它将用作 rem 计算的基础，但仅此而已。它不应该用于实际的文本大小计算：这只是某些浏览器的一种技巧。
• body 的字体大小是文本的默认字体大小：您的所有文本都应具有此大小，除非覆盖定义
• 特殊元素的大小应以 rem 为单位，并以像素为单位

这就是它在 CSS 中的样子：

html {
    font-size: 100% /* or 62.5% or whatever you like, it doesn't matter, it's just a browser fix, however "rem" units will be based on that value, so make it confortable for calculations */
}

body {
    font-size: 0.75em; /* That is your text's default font size. Here i chose 12px */
}

h1 { /* or whatever element you want to change the font size of */
    font-size: 20px; /* for browsers that don't understand the "rem" unit */
    font-size: 1.25rem; /* which equals to 20px if html's font-size was set to 100% */
}

请注意，虽然所有页面元素都应继承自 body 定义，但您可以改用包含所有标签的定义，就像在 HTML 重置中经常看到的那样：

a,
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    font-size: 0.75rem;
}

但我不推荐此重置。制定标准是为了帮助您避免这种伎俩。