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

Question

我喜欢em在创建网站时使用s.因此,我设置一个默认font-size的100.01%开启body元素.

我的问题是我应该在元素font-size上设置默认值吗？两者的利弊(如果有的话)是什么？bodyhtml

Answer 1

现在该rem单元开始变得流行,建议在根元素(html标记)上设置基本字体大小(rem代表root em).

Answer 2

我不认为在任何一个基础font-size上设置基础html或body允许使用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

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

• htmlfont-size是root font-size,这意味着它将被用作rem计算的基础,但就是这样,没有别的.它不应该用于实际文本大小计算:它只是某些浏览器的一种技巧.
• bodyfont-size是文本的默认字体大小:除非覆盖定义,否则所有文本都应具有此大小
• 特殊元素应具有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;
}

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