css - Em 使浏览器中的字体太大

Question

我是前端 Web 开发的新手，我在使用 em 的字体大小方面遇到了一些麻烦；通过搜索该站点，我学到了很多东西，但仍然存在一些问题。

我正在使用媒体查询来编写响应式网站的代码。当我以 em 为单位指定我的导航文本字体大小以便它在手机上看起来不错时，当我在桌面浏览器中查看它时它看起来很大。我将正文字体大小设置为 62.5%，我的理解是 em 是相对于此的。

有什么想法吗？

更新:谢谢杰基!我的问题绝对是我没有清楚地考虑 ems 在子元素中的行为方式。

Answer 1

Em 还会查看相对空间，因此无论为您的父级设置 em 值，它都会逐渐传给您的子级。使用 em 的挑战在于您必须知道(并记住)父级大小，因为它是其余类型行为方式的基础。我建议使用 REM，因为它们更符合根。

在下面的例子中，父级将把你的正文字体大小考虑到 62.5%，然后相应地增加，然后子级将查看父级的实际字体大小。

<style>
  .parent { font-size:1.5em }
  .child {  font-size:1em }
</style>
<div class="parent">
    <div class="child">Text</div>
</div>