px、em、rem区别介绍

px、em、rem区别介绍 | 菜鸟教程 (runoob.com) (opens new window)

PX

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

REM

rem是CSS3新增的一个相对单位（root em，根em），1rem等于html根元素设定的font-size的px值

如果css里面没有设定html的font-size，则默认浏览器以1rem=16px来换算。

假如我们在css里面设定下面的css

html{font-size:14px}

那么后面的CSS里面的rem值则是以这个14来换算。

EM

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

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

与rem不同的是 rem是继承html根元素的字体大小

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

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。