css单位中的 px,em和rem的区别

1.国内外选择区别：

　　国内比较喜欢用px

　　国外比较倾向于em 和 rem

2. 主要内容

1. px：

　　　　定义：像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。（例如大多数网页制作常用图片分辨率为72，即每英寸像素为72，1英寸等于2.54厘米。那么通过换算可以得出每厘米等于28像素。）

　　　　特点：

1. 1. 低版本 IE无法调整那些使用px作为单位的字体大小，即无法使用浏览器的放大功能进而放大字号，但现在有所改观。
   2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
   3. Firefox能够调整px和em，rem，然而近96%的中国网民使用的是蛋疼的IE浏览器(或内核)。
2. em:

　　　　定义：（font size of the element相对长度单位）相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

　　　　特点：

1. 1. em的值并不是固定的;
   2. em会继承父级元素的字体大小。
   3. 任意浏览器的默认字体高度16px（16像素）。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。在设计开发的时候只需对全体html设置font-size=62.5%，如用通配符*或html标签{font-size:62.5%}，以便计算使用
2. rem：

　　　　定义：（font size of the root element）单位，这是近几年才兴起的流行单位，包括移动端内、WebApp已被广泛使用。

　　　　特点：

1. 1. 使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素，即相对于你设置的html的字号大小，这样就起到了牵一发而动全身的作用，只需要修改html根元素的字号大小，页面里的大小都会随之改变。当然了兼容性嘛，除了万恶的IE8以下是不鸟的，应对也很简单，再写一个绝对的单位hack下就成，如span{font-size：14；font-size：3rem}即可！