Question

我喜欢在创建网站时在em工作。因此，我在font-size元素上设置了100.01%的默认body。

我的问题是，我应该在font-size还是body元素上设置默认html？两者的利弊（如果有的话）是什么？

Answer 1

现在rem单元开始变得流行，建议在根元素（html标记）上设置基本字体大小（rem代表 r oot 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

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

html的font-size是 root font-size，这意味着它将用作rem计算的基础，但就是这样，没有别的。它不应该用于实际文本大小计算：它只是某些浏览器的一种技巧。
body的font-size是文本的默认字体大小：除非覆盖定义，否则所有文本都应具有此大小
特殊元素应具有物件尺寸，并以像素为后盾

这就是它在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;
}

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

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

3 个答案: