em是何物 em与px的介绍及换算方法

em究竟是何物？

em，这个看似普通的单位，在网页设计中却拥有独特的魅力。它并不是我们常见的固定单位，如像素或点，而是一个相对单位，与字体大小息息相关。在浏览器默认设置中，字体高度即为16px，因此未经调整的浏览器都遵循这一规则：1em等于16px。那么，我们可以轻松地进行换算，例如12px等于0.75em，10px等于0.625em。

为了简化font-size的换算流程，我们需要在css中的body选择器中做出声明，将Font-size设置为62.5%。这一调整使得em值发生变化，具体来说，16px62.5%等于10px。这样，我们只需将原本的像素数值除以10，然后换成em作为单位，就可以轻松地进行字体大小的调整。

em的特点你了解吗？

em单位的魅力在于它的相对性。

1. em的值并不固定。与像素等固定单位不同，em的值会根据其所处的环境进行变化。

2. em会继承父级元素的字体大小。这一特性使得我们在进行网页设计时，可以更加灵活地调整字体大小，而无需对每个元素都进行单独的设定。

实践指南

想要顺利使用em单位，只需两步：

1. 在body选择器中声明Font-size为62.5%。这一步骤为整个网页的字体大小设定了一个基准。

2. 将原本的像素数值除以10，换成em作为单位。这样，你就可以轻松地调整字体大小，而无需担心不同浏览器或设备的兼容性问题。

看起来很简单吧？但如果只使用这两步，你可能会对结果感到惊讶。因为em的值不固定，且会继承父级元素的大小，所以在进行设计时需要特别注意。例如，你将content这个div的字体大小设为1.2em（也就是12px）。然后你将选择器p的字体大小也设为1.2em。但如果p是content的子级元素，那么p的字体大小就不是12px，而是根据content的字体大小进行计算。

为了避免字体大小的重复声明，我们需要明确每一个元素的em值是如何计算的。比如说，如果在content中声明了字体大小为1.2em，那么在声明p的字体大小时就不能再使用1.2em，因为此em已经因继承content的字体高度而发生了变化。这样的设计确实需要我们细心计算，但结果往往会是更加灵活、适应多种设备的网页设计。