Px、EM和REM在CSS中的差异综述

前言

EM和REM是灵活的、可扩展的单元，根据设计中的字体大小，从浏览器转换成像素值。如果你使用价值1em或1rem，它可以从浏览器16px，160px或任何其他值，浏览器使用1px，然后1px是始终显示完整的1px。

EM与REM的相似性

使用EM和REM单元可以使我们的设计更灵活，可以控制整体放大和减少的元素，而不是固定的大小。

EM与REM的区别

区别在于浏览器是基于谁来转换为PX值的。

REM单元如何转换成像素值

当使用REM单元时，它们对像素大小的转换取决于页面根元素的字体大小，即HTML元素的字体大小。
例如，根元素的字体大小16px，10rem将相当于160px，即10 x 16 = 160。

EM单元是如何转换成像素值的

使用EM单元时，像素值乘以EM值由字体大小的元素使用EM单元。例如，如果一个div有18px字体大小，10em将相当于180px，即10倍；18 = 180。

重点是以下内容：

有一个普遍的误解，他们单位是相对于父元素的字体大小。事实上，根据W3标准，它们大小的相对字体大小使用em元素的父元素的字体大小会影响他们的价值，但这一切发生的时候纯粹是因为遗传。让我们看看它是如何工作的。

你需要知道：

根HTML元素将继承在浏览器中建立除非固定值显式设置为覆盖它的字体大小。所以HTML元素的字体大小是一个REM值直接测定，但字体大小5月1日来自浏览器的设置。因此，浏览器的字体大小设置可以相互影响使用REM单元和每个值的EM单元继承。

总结REM与EM的区别

上述所有内容如下：

REM单元翻译为像素值是由HTML元素的字体大小决定的。字体的大小会受到浏览器中字体大小设置的影响，除非一个特定的单元被显式重写。

EM单元根据其使用的字体大小转向像素值，字体大小是从父元素继承的字体的大小，除非用特定的单位进行显式重写。
为什么使用快速眼动仪：

REM单元提供了最大的强度，不仅具有相同的大小，也不具有继承性，相反，它提供了一种方法，让用户偏好影响网站中每个REM元素的大小，而不是使用固定的PX单元。
为此目的，使用REM单元的主要目的应该是确保无论用户如何设置自己的浏览器，我们的布局都可以调整到合适的大小。

为什么使用电磁单位

EM单元取决于字体大小值的大小，而不是HTML元素的字体大小。
为此目的，EM单元的主要目的应该是允许特定设计元素中的可扩展性。
例如，你可以使用em值来设置填充，边缘，和导航菜单项高度等值线。一个0.9rem字体大小的菜单
这样，如果改变菜单项周围的空间，空间将在空间的其余部分成比例。

总结

REM和EM单元是浏览器根据设计中字体大小计算的像素值。

EM单元基于使用它们元素的字体的大小。

REM单元基于HTML元素的字体大小。

EM单元可能受到任何继承的父元素字体大小的影响。

REM单元可以从浏览器字体设置继承字体大小。
EM单元的使用应该基于组件的字体大小，而不是根元素的字体大小。
您不需要使用EM单元，您需要根据浏览器字体大小的大小使用REM。

使用REM单位，除非你确定你需要一个EM单位，包括字体大小。

在媒体查询中使用REM单元

不要在多列布局中使用EM或REM -使用%。

不要使用EM或REM，如果缩放不可避免地导致布局元素的破坏。
以上是关于Px，EM和REM在CSS中的区别。希望本文的内容能给大家的学习或工作带来一定的帮助。如果有任何疑问，你可以留言。