px em rem关系

一：px（像素）

px和屏幕分辨率关系

1.显示分辨率就是屏幕上显示的像素个数，而像素是指能单独显示颜色的最小单位

2.计算机屏幕上显示多少信息的设置，以水平和垂直像素来衡量

3.分辨率1600*900的意思是水平方向含有像素数为1600个，垂直方向像素数900个。屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。

4.画面是由许多的像素点组成，而画质的细腻就是由点距来决定的，点距一般是指显示屏相邻两个像素点之间的距离，点距越小，画面越细腻、

px特点

1.IE无法调整那些使用px作为单位的字体大小

2.国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位

二：px(pixel)相对长度单位。像素是相对于显示器屏幕分辨率而言的。

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

任意浏览器的默认字体高都是16px，所有未经调整的浏览器都符合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作为单位就行了

三：em特点

1.em的值并不固定

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

写css时，注意：

1.body选择器中声明font-size=62.5%

2.将原来的px数值除以10，然后换上em作为单位

3.重新计算那些被放大的字体的em数值，避免字体大小的重复声明

四：rem特点

rem是css3新增的一个相对单位。rem与em区别？区别在于使用rem为元素设定字体大小时，仍然是相对大小。但相对的只是html根元素，这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8机更早版本外，所有浏览器均已支持rem，对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

注意：选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版本的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px，或者两者都使用

px em rem单位转换工具

地址：http://pxtoem.com/