我应该在body或html元素上设置默认的font-size吗？

I like to work in ems when creating websites. Therefore I set a default font-size of 100.01% on the body element.

我喜欢在创建网站时使用ems。因此，我在body元素上设置了默认字体大小100.01％。

My question is should I set the default font-size on the body or the html element? What are the pros and cons (if any) of both?

我的问题是我应该在body或html元素上设置默认的字体大小？两者的利弊（如果有的话）是什么？

3 个解决方案

#1

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

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

#2

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

我不相信在html或body上设置基本字体大小以允许使用ems进行大小调整有任何优点或缺点;它们都会产生同样的效果。

Not related to the question:

与问题无关：

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

不过我会建议使用不同的默认字体大小。我会把它设为：

body {
    font-size: 62.5%;
}

Doing this reduces the default font-size from 16px down to 10px. This then makes choosing font-size much easier as there is no need for difficult calculations. It means that 1em is equal to 10px and so calculating the px size is a matter of multiplying by 10:

这样做可以将默认字体大小从16px降低到10px。这样就可以更容易地选择字体大小，因为不需要进行困难的计算。这意味着1em等于10px，因此计算px大小是乘以10的问题：

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

#3

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

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

html's font-size is the root font-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.
html的font-size是root font-size，这意味着它将被用作rem计算的基础，但就是这样，没有别的。它不应该用于实际文本大小计算：它只是某些浏览器的一种技巧。
body's font-size is the text's default font-size: all your text should have this size, unless overriding definition
body的font-size是文本的默认font-size：除非覆盖定义，否则所有文本都应具有此大小
special elements should have sizes in rem, with a fallback in pixels
特殊元素应具有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 body definition, you could use an all-tag-inclusive definition instead, like often seen in HTML resets:

请注意，虽然所有页面的元素都应该从正文定义继承，但您可以使用包含全部标记的定义，就像在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.

但是，我不建议重置。制定标准是为了帮助您避免这种伎俩。

#1