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

一、px：

px就是像素，用px设置字体大小的时候会比较精确，但是有时候我们会使用不同屏幕尺寸去浏览网页。当页面相应的扩大或者缩小的时候，页面的字体大小就会出现过小或者过大。由于这种问题，就提出了使用em来定义页面上字体大小。

二、em：

em是一个相对的值，而不是一个具体的值，是根据一定的比例去缩放字体，那么就会出现一个问题，em的值是相对于谁的大小来缩放的，也就是说，缩放的基准是什么？一般来说，em的大小是相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

除了浏览器的初始字号设置之外，em也可以从包含标签中继承尺寸信息。一个0.9em的类型尺寸将使文本在大部分以16px为基础尺寸的显示器上为大约14px高。但是如果你有一个带.9em的字号的<p>标签，然后在这个<p>标签中有一个带0.9em的<strong>标签，这个<strong>标签的em尺寸就不是14px而是12px（16*0.9*0.9）。因此在使用em值时要记住继承这个特性。

三、rem：

rem是css3提出的新属性，一般用于移动端。rem也是一个相对值，但是rem是相对于根元素（html）来说的。这样的话可以做到只修改根元素便可以调整所有字体大小。任意浏览器的默认字体高都是16px，因此我们可以简化简化font-size换算的方法：将body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

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

在这里为大家提供一个px,em,rem单位转换工具

地址：http://pxtoem.com/