默认情况下: 1em = 10px; 1rem = 16px

px是css中的逻辑像素，和移动端的物理像素之间会有一个比值dpr
em是指相对于父元素的大小
rem中的r就是root，也就是相对于root元素的大小（html标签）

px 是固定的值 em 是相对父级变换大小 rem 是相对html,body大小变换的

1em = 当前元素的字体大小，1rem = 当前html元素的字体大小

• px: 绝对固定的值，无论页面放大或者缩小都不会改变。
• em: 相对父元素字体大小的倍数。如果父元素的字体为 12px，那么子元素 1em 就是 24px。由于是相对父级的倍数，所以多层嵌套时，倍数关系的计算会很头痛。
• rem: 相对根元素字体大小的倍数。相对于 html 的字体大小，如果不做任何修改，浏览器默认字体大小为 16px。

小技巧

如果为了方便计算 rem，可以设置 font-size= 62.5% 这样一来默认的字体就变成 10px 了。之后的 rem 就是以 10 为基准了。

• em和rem属于与font-size有关的长度单位，大小不固定，个人体验在多设备上优于px但不如视图系列单位
• px属于绝对长度单位，类似的还有cm,mm 。在不同设备上表现的宽度可能不一致，但相对长度固定
• vw,vh 属于与视图大小有关的长度单位，vw为当前视图宽度的 1%.vh为当前视图高度的 1%

那么多回答em是相对父元素大小的麻烦你们严谨一点好吗。。

em是相对自身标签的font-size大小，哪是什么相对父元素咯

• px: 绝对固定的值，无论页面放大或者缩小都不会改变。
• em: 相对父元素字体大小的倍数。如果父元素的字体为 12px，那么子元素 1em 就是 24px。由于是相对父级的倍数，所以多层嵌套时，倍数关系的计算会很头痛。
• rem: 相对根元素字体大小的倍数。相对于 html 的字体大小，如果不做任何修改，浏览器默认字体大小为 16px。

小技巧

如果为了方便计算 rem，可以设置 font-size= 62.5% 这样一来默认的字体就变成 10px 了。之后的 rem 就是以 10 为基准了。

如果父元素font-size: 12px; 子元素设置 font-size: 1em; 则为12px; 不是24px;

關於 em 的問題,可以參考
https://www.w3schools.com/css/css_units.asp
Relative to the font-size of the element (2em means 2 times the size of the current font)
相對於父級元素的字體大小(2em表示當前字體大小的2倍)
可以實際用這個案例試玩一下可以更清楚
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_em

• https://www.runoob.com/w3cnote/px-em-rem-different.html

PX

像素，相对长度单位，px 是相对显示器屏幕分辨率而言的。

EM

相对长度单位，em 相对于当前对象内文本的字体尺寸。通常 1em = 16px。

REM

root em，CSS3 新增的一个相对单位。
使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用 px 即可 。
对于需要适配各种移动设备，使用 rem。

关于em，存在两种情况：

• 用于font-size属性时，是该元素继承的font-size缩放因子，也就是相对于父元素的font-size大小；
• 用于计算盒模型大小时，不是基于继承的font-size，而是基于元素自身计算的font-size

• px 定长，放大缩小不改变，不同设备dpr( 物理像素 / 独立像素)不同，低分辨率屏幕dpr=1，高分辨率屏幕>1

• em相对大小，当前字体的倍数

• rem相对大小，类似于em，根元素html字体大小的倍数