CSS 单位 px、pt、em、rem

1. px (pixel，像素)：

px即pixel(像素)，是相对长度单位，根据屏幕的像素决定，最能准确还原设计图。px是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。

 

2. pt (point，磅)：

pt (point，磅)是印刷行业常用单位，是一个物理长度单位，指的是72分之一英寸。

 

3. em

em：相对单位(相对于当前对象内文本的字体尺寸)，相对父元素属性的单位，一般用于移动端布局，每个子元素透过「倍数」乘以父元素的px值。最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。em值并不固定，它会继承父级元素的字体大小，相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被认为设置，则相对于浏览器的默认字体尺寸。

 

4. rem

rem：是CSS3新增的一个相对单位，每个元素透过「倍数」乘以根元素的px值。结合相对定位和绝对定位的优势，相对根元素html，想要修改字体大小，只要修改html的大小就可以了

rem兼容性
        目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

 

rem与em的区别在于：

        它是相对于html根元素的。(在body标签里面设置字体大小不起作用)

        既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应

        rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。

        em 单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。