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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6905834/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:50:32  来源:igfitidea点击:

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

htmlcssfont-size

提问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-size100.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-sizebodyhtml元素上设置默认值吗?两者的优缺点(如果有的话)是什么?

采纳答案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在两者上设置基础htmlbody允许使用 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-size16pxdown 减少到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.

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