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}便可！