CSS单位PX、EM、REM、PT的区别

 

1、PX ：像素（Pixel）

PX是相对长度单位，它是相对于显示器屏幕分辨率而言的。

优缺点：比较稳定和精确，但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。

 

2、EM：是相对长度单位。

EM是相对于父元素来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

优缺点：EM的值并不是固定的，它会继承父级元素的字体大小。

 

EM和PX的之间的相互转换：

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

为了使用方便，用em时，我们通常在CSS中的body选择器中声明font-size=62.5%（使em值变为 16px*62.5%=10px）, 之后，你只需要将你使用的px值除以10，即可得到em值，如：12px=1.2em, 10px=1em。

 

3、REM ：是CSS3新增的一个相对单位（root em，根em）

REM是相对单位，是相对HTML根元素。

这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

目前，除了IE8及更早版本外，所有浏览器均已支持rem。

 

4、PT ：印刷业上常使用的单位

PT是磅的意思，一般用于页面打印排版。

 

个人推荐：

PC端固定宽度的页面使用px；

PC端自适应页面使用em；

移动端使用rem。