学习CSS了解单位em和px的区别

在日常开发中，我们往往习惯使用px（像素）来定义字体大小。这种方式的一大缺陷在于它限制了浏览器字体放大的功能。反观国外的大部分网站，即便在IE浏览器中也能顺利使用字体放大功能。究其原因，在于它们更多地采用了em作为字体单位。

em作为一种相对长度单位，其特性在于能够相对于当前对象内文本的字体尺寸进行调整。如果未对行内文本的字体尺寸进行人为设置，那么em的基准便是浏览器的默认字体尺寸。值得注意的是，几乎所有的浏览器默认字体高都是16px，因此一个未经调整的浏览器中的1em等于16px。这样的换算为我们提供了一个方便的工具，让我们能够以em为单位重新定义原有的px数值。比如，原本的12px可以转换为0.75em，而10px则等于0.625em。为了使换算更为简便，我们可以在CSS的body选择器中声明Font-size为62.5%，这样em的基准值就变为10px，大大简化了计算过程。但汉字的情况略有不同，可能需要额外调整以确保显示正常。对此，Jorux已经提出了一种解决方案：在body选择器中把字体大小调整为63%。这可能源于IE在处理汉字时对于浮点数的特殊处理方式。

em单位的另一个优点是它的相对性。它不仅会根据浏览器的默认字体大小进行调整，还会继承父级元素的字体大小。这使得em单位在布局设计中具有极高的灵活性。在编写CSS时，我们需要特别注意这两点：一是在body选择器中正确设置Font-size；二是合理地将原来的px数值转换为em单位。我们还需要注意避免字体大小的重复声明，以确保设计的连贯性和一致性。尽管这个过程可能需要一些重新计算和调整，但最终带来的将是更加灵活、用户友好的网页设计体验。