px rem em的区别

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

em是相对长度单位。相对于当前文本内的字体尺寸。如当前对行内文本的字体尺寸未被人设置，则相对于浏览器的默认字体尺寸任意浏览器的默认字体高都是16px,所有未经调整的浏览器都符合1em=16px

em特点：

1 em的值并不是固定的

2 em会继承父级元素的字体大小

3 重新计算那些被放大的字体的em数值，避免字体大小的重复声明

比如说，你在#content中声明了字体大小为1.2rem，那么在声明p的字体大小时就只能是1em,而不是1.2em,因为此em非彼em,它因继承#content的字体高而变为了1em=12px

rem特点：rem(root em)，使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素，这个单位集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例的调整所有字体，又可以避免字体大小逐层符合的连锁反应。em和rem单位之间的区别是浏览器根据谁来转化成px值，理解这种差异是决定何时使用哪个单元的关键rem如何转换为像素值当使用rem单位，他们转化为像素大小取决于页根元素的字体大小，即html元素的字体大小。

例如，根元素的字体大小为16px,10rem将等同于160pxem单位

如何转换为像素值当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小.

例如：如果一个div有18px字体大小，10em将等同于180px，em是相对于使用em单位的元素的字体大小.父元素的字体大小可以影响em值，但这种情况的发生，纯粹是因为继承。每个元素都会自动继承其父元素的字体大小。继承效果只能被明确的字体单位覆盖，比如px、vw使用em单位的元素字体可能会收到其任何父元素的字体大小影响根html元素将继承浏览器中设置的字体大小，除非显式设置固定值去覆盖，所以html元素的字体大小虽然是直接确定rem值，但字体大小可能首先来自浏览器设置，因此浏览器的字体大小设置可以影响每个使用rem单位以及每个通过em单位继承的值最好不要去改变html元素的字体大小，因为它重写继承了用户设置的浏览器字体大小，并且这剥夺了用户自行调整以获得最佳视觉效果的能力em单位的主要目的应该是允许保持在一个特定的设计元素范围内的可扩展性通常不使用em单位控制字体大小创建布局的时候，往往要以像素为单位更方便，但部署时应该使用rem单位布局中的列宽通常应该是%,因此他们可以流畅适应无法预知大小的视区。然而单一列一般仍然应使用rem值来设置最大宽度