Em 使浏览器中的字体太大答案

【问题标题】：Em makes font too big in browserEm 使浏览器中的字体太大
【发布时间】：2015-03-11 17:03:12
【问题描述】：

我对前端 Web 开发有点陌生，我在使用 em 字体大小时遇到了一些麻烦；通过搜索这个网站，我学到了很多东西，但仍然有一些问题。

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

有什么想法吗？

更新：感谢杰基！我的问题肯定是我没有清楚地考虑 em 在子元素中的行为方式。

【问题讨论】：

【解决方案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>

【讨论】：