点击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

写本文的目的主要是为了后面写H5的相关知识，而且文本中会提到日后要写的关于H5的三篇（文中加粗长字体）文章的内容，关于H5这个专题感兴趣的童靴可以关注我的号。

国内大都喜欢用px，而国外的网站大都喜欢用em和rem，然而，这三者到底有什么区别了？

下面一个一个来看：

一、PX：

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。在PC侧，这CSS的1px往往都是对应着电脑屏幕的1个物理像素（分辨率），移动设备则不是这样的，知道这一点对移动网页开发很重要，下回专门来总结这个。

二、EM：

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

什么意思了？下面实例解释一下。

1、暂且认为任意浏览器的默认字体高都是16px（真的是这样吗？这可是移动开发的一个大大的坑啊，这里为了讲单位，先这样认为罢了，有关这个疑问，我们下回来分析它及其解决办法）。

所有未经调整的浏览器都符合：1em = 16px。那么12px=0.75em，10px=0.625px。

然而，为了简化font-size的换算，我们可以这么做：

设置：body{font-size:62.5%}

这样的话，1em=62.5%*16=10px，也就是说只需要将你原来的px数值除以10，就是em单位的数值了。如：

12px=1.2em

2、em的值并不是固定的，它会继承父元素的字体大小。

比如下面这段代码：

由上面图可知，html元素上我们设置了字体大小为16px。p元素的字体大小我们设置了2em，也就是2*16=32px。在往下span元素，我们设置它的字体大小0.5em，这个时候的基准大小相对它的元素。即（1em=32px），也就是0.5*32=16px。下面看一下效果：

由此可见，当元素嵌套一旦变多的时候，em就会显得很无助。好在我们还有另外一个单元rem。

三、REM：

rem是CSS3新增的一个相对单位（root em，相对根元素），这个单位引起了大家的广泛关注。它与em一样是相对单位，只是相对HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。（rem真的就成了我们移动布局的神器了吗？听我日后分析）

举个例子：（还是上面那个例子，除了将p和span的字体大小单位改成rem，还将span的字体大小改成1）

p元素字体大小2rem，相当于就是2*16=32px。span元素的字体大小1rem，相当于就是1*16=16px。所以效果和em的一样。

这个时候需要注意，为了方便计算，可以将html元素定为62.5%（也就是使用浏览器默认字体16px）,这样，往后的元素以rem为单位，值就只要PX的值除以10就行。

四、写在最后的总结：

为了提高开发效率，有关单位px、em、rem转换，也可以借助一些在线的转换工具，如pxtoem。