DEV Community ·

使用em和rem进行尺寸设置

💡 原文英文，约800词，阅读约需3分钟。

📝

内容提要

"em"是相对单位，基于大写字母M的像素大小（默认16px），用于设置字体和边距等。虽然"em"可以实现灵活布局和无障碍访问，但可能导致计算复杂性和累积效应。为避免这些问题，可以使用"rem"单位，它始终相对于根元素的字体大小。

🎯

🔎

在选择使用em还是rem单位时，开发者需要考虑布局的复杂性和可维护性。em单位虽然灵活，但在嵌套元素中可能导致意外的字体大小变化，增加计算复杂性。而rem单位则提供了更稳定的基准，避免了这种累积效应，适合需要一致性和可预测性的场景。

使用em单位可以提升无障碍设计的效果，允许用户在浏览器中缩放文本而不影响布局。然而，开发者在实现时需注意，过度依赖em可能导致性能问题，尤其是在复杂的CSS计算中。因此，合理选择单位对提升用户体验至关重要。

em单位的相对特性使其在某些情况下计算成本较高，尤其是在复杂的样式表中。开发者应关注性能，避免在需要频繁计算的场景中使用em，转而考虑使用rem或其他绝对单位，以提高页面加载速度和响应能力。

❓

em是相对单位，基于大写字母M的像素大小，默认情况下为16px。

使用em单位可以实现灵活布局和无障碍访问，允许浏览器根据用户的缩放需求调整文本大小。

em单位的计算可能复杂，存在累积效应，改变父元素的字体大小会影响子元素的em值，可能导致意外的字体大小。

可以使用rem单位，它始终相对于根元素的字体大小，从而避免em的累积效应。

rem单位相对于根元素的字体大小，而em单位相对于父元素的字体大小，因此rem避免了em的累积效应。

em单位可以用于设置长度单位，如填充、边距和字体大小等。

🏷️