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

Should I set the default font-size on the body or html element?

提问by joshnh

I like to work in ems when creating websites. Therefore I set a default font-sizeof 100.01%on the bodyelement.

我em在创建网站时喜欢在s 中工作。因此，我设置一个默认font-size的100.01%开启body元素。

My question is should I set the default font-sizeon the bodyor the htmlelement? What are the pros and cons (if any) of both?

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

采纳答案by joshnh

Now that the remunit is starting to become popular, setting the base font-size on the root element (html tag) is advised (remstands for root em).

现在，rem单元开始变得普及，根元素（HTML标签）建议设置基字体大小（rem代表- [ROOT EM）。

回答by tw16

I don't believe there is any advantage or disadvantage to setting the base font-sizeon either htmlor bodyto allow for sizing with ems; they will both have the same effect.

我不认为font-size在两者上设置基础html或body允许使用 em 调整大小有任何优点或缺点；它们都将产生相同的效果。

Not related to the question:

与问题无关：

I would however suggest using a different default font-size. I would set it as:

但是，我建议使用不同的默认值font-size。我会把它设置为：

body {
    font-size: 62.5%;
}

Doing this reduces the default font-sizefrom 16pxdown to 10px. This then makes choosing font-sizemuch easier as there is no need for difficult calculations. It means that 1emis equal to 10pxand so calculating the pxsize is a matter of multiplying by 10:

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

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

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

回答by Ninj

If you really want to follow the rules and still keep flexibility, you should consider this:

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

• html's font-size is the rootfont-size, which means it will be used as a base for rem calculation, but that's it, nothing else. It shouldn't be used for real text size calculation: it's just a kind of trick for some browsers.
• body's font-size is the text's default font-size: all your text should have this size, unless overriding definition
• special elements should have sizes in rem, with a fallback in pixels

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

So that is how it looks in CSS:

这就是它在 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% */
}

Note that, while all page's elements should inherit from the bodydefinition, you could use an all-tag-inclusive definition instead, like often seen in HTML resets:

请注意，虽然页面的所有元素都应该从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;
}

I don't recommend this reset however. Standards are made to help you avoid this kind of tricks.

但是，我不建议进行此重置。制定标准是为了帮助您避免此类伎俩。