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

1、px：

 

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

2、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值时要记住继承这个特性。

3、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/