EM和REM单位有什么区别？-css教程-PHP中文网

CSS中的em和rem单位之间的差异在于其尺寸的参考点。 em单元相对于其直接或最近父元件的字体大小，而rem单元相对于root（HTML）元素的字体大小。

例如，如果将根html元素的字体大小设置为16px ，则1rem将等于16px 。但是，如果体内的子元素的字体尺寸设置为1.5em ，其父元素的字体大小为20px ，则子元素的字体大小将变为30px （1.5倍20px ）。

这种区别会极大地影响您在网站上管理和扩展版式的方式。借助em ，父母字体大小的变化将降低并影响所有用em单位设置的儿童，这可能会导致意外的结果。另一方面， rem单元提供了更可预测的尺寸，因为它们始终引用根部元素，而不论嵌套水平如何。

em单元的使用可能会对网站的可扩展性产生重大影响，这主要是由于它们的相对性质。由于em单元相对于最近父母的字体大小，因此DOM中的任何级别的变化都会影响层次结构下方的元素。对于可伸缩性而言，这既有益又具有挑战性：

有益的： em单元可以使彼此相对于彼此的文本和其他元素更容易。例如，以em设置设置按钮的填充意味着随着字体大小的增加或减小，按钮的填充将按比例扩展，从而保持视觉平衡。
具有挑战性： em单元的级联效应可能使得很难预测深层嵌套元素的最终大小。如果祖先的字体大小变化，则可能会导致整个网站上许多元素的意外调整，并可能导致布局问题。

例如，如果基本字体大小为16px ，并且段落的字体大小设置为1.2em ，则将为19.2px 。如果将父容器的字体尺寸更改为18px ，则该段落的字体大小将变为21.6px 。这可能会导致意外的文本大小和布局变化，尤其是在响应式设计中。

是的， rem单元可以简化不同设备的字体大小的管理，因为它们提供了一个一致的参考点，即根（ html ）元素的字体大小。这种均匀性使无论设备或屏幕尺寸如何，都可以更轻松地在整个网站上管理和扩展版式。

这是rem单元可以提供帮助的方式：

一致性：通过使用rem单元，您可以确保所有文本尺寸均基于单个字体大小，从而更容易在不同元素和页面上保持视觉一致性。
可伸缩性：调整根字体的大小（通常是通过媒体查询进行响应式设计）将按比例地将所有文本设置为整个站点的rem单元。这可以更好地控制各种设备上的文本缩放，从手机到桌面监视器。
简化的维护：由于rem单元不依赖元素的嵌套水平，因此字体大小的更改很简单，并且不太可能引起级联效应，从而更容易更新和维护网站的排版。

例如，将根字体大小设置为16px并使用1.2rem用于标题将始终导致整个站点19.2px标题大小。如果您以后决定将基本字体尺寸提高到较大屏幕的18px ，则所有标题将自动调整为21.6px ，从而确保具有凝聚力的缩放体验。

em和rem单元之间的选择取决于项目的特定设计和功能要求。以下是某些情况，一个情况可能比另一个更合适：

最适合em单位的方案：

组件内的相对尺寸：当您希望组件中的元素相互按比例扩展时， em单位是理想的。例如，随着字体尺寸的变化，填充和字体大小应保持特定比率的按钮应保持特定比率。
嵌套和模块化：在您需要创建可能嵌套在其他不同字体大小的其他容器中的模块化组件的情况下， em单元可以通过相对于父级扩展来帮助保持视觉和谐。
动态文本调整大小：如果您需要响应用户发起的文本调整大小的元素（例如，浏览器缩放或可访问性设置），则em单元可以提供更动态和灵活的响应，因为它们会根据最近父母的字体大小进行调整。

最适合rem单元的方案：