我应该在 body 或 html 元素上设置默认字体大小吗？
Posted
技术标签:
【中文标题】我应该在 body 或 html 元素上设置默认字体大小吗？【英文标题】：Should I set the default font-size on the body or html element? 【发布时间】：2011-10-17 20:42:41 【问题描述】：我喜欢在创建网站时在ems 工作。因此，我在 body 元素上设置了 100.01% 的默认 font-size。
我的问题是我应该在body 或html 元素上设置默认font-size 吗？两者的优缺点（如果有的话）是什么？
【问题讨论】：
在一个不相关的注释上，为什么100.01%？如果我没记错的话，它修复了一个仅存在于某些甚至不再使用的旧版 Opera 中的错误。
@thirtydot：这是一种补偿旧版本歌剧和野生动物园舍入误差的方法，因此它们也将呈现 100%小或太大。
@tw16 所以我认为它不再需要了？什么版本的 Opera？
我认为我们正在谈论 Opera 5/6！那是很久以前的事了。
【参考方案1】：
现在rem 单元开始流行，建议在根元素（html 标记）上设置基本字体大小（rem 代表 root em）。
【讨论】：
小心 REM 和 IE9。我尝试在不止是字体上使用它，而 IE 无法像所有其他浏览器那样识别 REM。看起来很糟糕。 请记住，如果您需要在px 或em 中提供回退，只需指定一个额外的声明，以便您在rem 值之前拥有回退值。当然，复杂性在于必须计算您需要的绝对值，否则使用rem 单位可以避免这种情况。
如果有提供的示例，我将不胜感激。【参考方案2】：
我认为在html 或body 上设置基础font-size 以允许使用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
【讨论】：
数学不是问题，无论正文字体大小是多少，当涉及到行高和边距底部时，数字仍然会变得混乱。不过感谢您的回答。 @joshuahibbert：数学部分是对我主要答案的补充，即选择其中一个没有优势/劣势。 只是出于好奇，假设浏览器的默认值实际上是 16px，为什么要将 body font-size 设置为 62.5% 以获得 10px...当您可以将其设置为 10px 时？然后你仍然可以使用基于这个 10px 的 rems。没有？ CSS Wizard wrote an article against using 62.5% 除非你真的想要一个 10px 的基本字体。 “我觉得，使用 62.5% 方法背后的主要原因是懒惰，这是一件好事。优秀的开发人员是懒惰的。然而这种懒惰是错误的；它实际上会导致你更多的工作。你必须定义所有字体大小元素而不仅仅是一次让它们继承，当一个显式大小的元素被放置在另一个元素中时，你必须解决那些可怕的继承问题。” 这个怎么样....html font-size: 62.5% body font-size: 160% 这样，您仍然可以制作1rem == 10px，但 1em 的大小仍然以相同的开头（1em == 16px）在文档。两全其美？【参考方案3】：
如果你真的想遵守规则并且仍然保持灵活性，你应该考虑这个：
html 的字体大小是 root 字体大小，这意味着它将用作 rem 计算的基础，但仅此而已。它不应该用于实际的文本大小计算：这只是某些浏览器的一种技巧。
body 的字体大小是文本的默认字体大小：您的所有文本都应具有此大小，除非覆盖定义
特殊元素的大小应以 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;
但我不推荐此重置。制定标准是为了帮助您避免这种伎俩。
【讨论】：
最后一个全标签建议使<p> 元素中的<a> 元素小75%，这（可能）不是你想要的。其他嵌套元素的类似行为。您可以使用rem 修复它，但我不同意首先执行此全标签“重置”。只需设置<body> 标签并添加font-size: inherit; 进行重置。
糟糕，必须是“rem”。请注意，我不喜欢这种全标签重置，但有时对于具有奇怪行为的浏览器（谁说 IE？），这是一个很好的解决方法。我正在纠正它，谢谢。
嗨@Ninj，简短的问题，您有什么理由将<body> font-size 设置为em 单位而不是rem单位？我猜结果是一样的，因为<html> 是<body> 的父元素，<html> 也是根元素，但如果您最终使用 rems 作为主要尺寸单位，使用 rems 可能会更清楚。谢谢！
@AlexMM 据我记得（这是一个旧案例），这是因为“rem”准确地说是指正文的字体大小，它看起来像一个无限循环（尽管它可能实际工作）
@Ninj 嗨！根据您的解释的第一段以及在MDN CSS length data type docu 和MDN font-size docu 中找到的rem 定义rem 单元（又名根em) 与根元素大小有关，即<html> 标签。只是想知道你这样做的原因，但我相信在这种情况下em 和rem 会产生相同的结果。以上是关于我应该在 body 或 html 元素上设置默认字体大小吗？的主要内容，如果未能解决你的问题，请参考以下文章