我应该在 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
Should I set the default font-size on the body or html element?
提问by joshnh
I like to work in em
s when creating websites. Therefore I set a default font-size
of 100.01%
on the body
element.
我em
在创建网站时喜欢在s 中工作。因此,我设置一个默认font-size
的100.01%
开启body
元素。
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?
我的问题是我应该font-size
在body
或html
元素上设置默认值吗?两者的优缺点(如果有的话)是什么?
采纳答案by joshnh
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)。
回答by tw16
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.
我不认为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-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:
这样做将默认值font-size
从16px
down 减少到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 body
definition, 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.
但是,我不建议进行此重置。制定标准是为了帮助您避免此类伎俩。