问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

设置 body 标签的字体大小

社区维基
1
新手上路，请多包涵

我一直在尝试配置一个基本的 CSS 模板，我可以用它来开始使用 REM。我看到设置以下 body { font-size: 62.5% }; 的方法，以便数学更容易（1rem = 10px，因为 16px 是默认字体大小）。

我不确定我喜欢这种方式，因为它涉及必须指定 <h1> - <h6> 以及 <p> 标签的大小，如果字体大小10px 不是我的基准。

我一直在尝试一些不同的方法，并且对 px 和 % 在字体大小方面的关系感到非常困惑。举个例子：

 <html>

<body>

  <header>
    <h1>Testing h1</h1>
    <h2>Testing h2</h2>
  </header>

  <main>
    <p>Random paragraph</p>
  </main>
</body>

</html>

考虑以下 css：

 body {
 font-size: 100%;
}

我希望浏览器以默认大小呈现字体，即 16px。 <p> 标签中的任何内容仍然是 16px，但是 <h1> - <h6> 表恢复为浏览器样式中指定的原始大小。为什么不是所有文本都设置为 16px？

另一个例子：

 body {
  font-size: 12px;
}

为什么 <h1> - <h6> 不采用 12px 的字体大小？ <h1> - <h6> 确实变小了（12/16 = 0.75 时缩小了 75%）。我希望 h1 为 12px 或保持相同的默认值，因为在用户代理样式表中为 h1-h6 指定的值更具体。

规则在指定百分比方面如何运作？在设置样式表以便可以使用 REM 方面的最佳实践是什么？

原文由 user483934 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcss
阅读 1.9k
2 个回答
得票最新
社区维基
1
✓ 已被采纳

h1 有一个默认值 font-size 设置为 2em 这意味着 2 x the font size of the parent element 与其他标题相同，它们都有一个 font-size 使用 em 单位指定。

在此处输入图像描述

Using percentage with font-size is also relative to parent font-size and means p x the font size of the parent element where p is a value between 0 （0%）和 1 （100%）。

So if you specify 100% within the body then the body will have 16px (the default font-size ) and h1 will have 32px 。

您可以使用相同的逻辑找到其他标题的 font-size 。

 body {
  font-size:100%;
}

 <h1>this a text</h1>

如果您在正文中指定 12px 则 h1 将具有 24px

 body {
  font-size:12px;
}

 <h1>this a text</h1>

并指定 62.5% 将使主体具有 10px 和 h1 20px

 body {
  font-size:62.5%;
}

 <h1>this a text</h1>

由于 p 没有默认值 font-size 它只会继承主体中指定的值。

您可以使用开发工具在计算选项卡中轻松检查这些值：

在此处输入图像描述

从 文档中：

em 值的大小是动态的。定义 font-size 属性时，em 等于应用于 相关元素 父 元素的字体大小。如果你没有在页面的任何地方设置字体大小，那么它就是浏览器的默认值，通常是 16px

对于百分比：

一个正的 <percentage> 值，相对于父元素的字体大小。

原文由 Temani Afif 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

rem 是相对于 HTML ，而不是 BODY

rem 单位基于 HTML 元素的字体大小，而不是 BODY 元素。所以你应该这样设置基本字体大小：

 HTML {font-size: 62.5%; } /* Now `rem` is equivalent to `10px` */

代替

BODY {font-size: 62.5%; } /* Does NOT affect `rem` */

HTML 字体大小可能会影响滚动速度

请注意，至少在某些浏览器中， HTML 元素的字体大小会影响滚轮滚动步长： HTML 元素的字体大小越小，步长越小是，滚动速度较慢。

重置所有元素的字体大小

要重置所有元素的字体大小，您可以使用通用选择器：

 * {font-size: 100%; }

要么：

 * {font-size: 1em; }

正确的 DOCTYPE 用于跨浏览器的一致性

此外，请确保您在 HTML 文档的开头有正确的 DOCTYPE 声明，以打开文档的标准合规模式，以实现一致的跨浏览器呈现和行为：

 <!DOCTYPE html>

原文由 Marat Tanalin 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏