彻底弄懂css中单位px和em,rem的区别

转换工具：

http://pxtoem.com/

PX特点

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

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

3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

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

       任意浏览器的默认字体高都是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数值。避免字体大小的重复声明。

        也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

rem特点 

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

一个例子：

p {font-size:14px; font-size:.875rem;}

注意： 

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

 

写这篇文章是因为自己被rem这个坑绊过脚，因此特意去研究了下rem这个单位。

简单阐述下px、em、rem之前的关系（其实网上很多，我这里稍微提一下）。

先抛出一个问题：为什么要选择rem？

px：像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem。

em：继承父级的，假设html的font-size默认为16px，body字体大小定义为50%，那么在body里字体大小就是1em=8px了。可当你又定义了一个div，然后把字体设置成了50%，请问，现在div下的1em等于多少？因为继承了父级的值，现在这个div里的1em=4px，这么嵌套下去的话，抱歉，我数学不好！所有rem就出现了。

rem：是em的升级版，rem只会相对html的值，不会受到父级的影响，这样的好处在于：从em里的例子来讲，1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的，所以ie8或以下请无视（始终想不明白，为什么国人至今对微软都放弃的ie这么恋恋不舍）。

以上也算是讲清了他们之间的区别和关系，rem更多的运用于移动H5页面的适配使用。

下面来说说怎么更方便的使用rem和自己开文处提到的坑！

之前遇到的坑是这样的。浏览器默认的字体大小都是16px（注意这里），所以要使1rem=10px，那么只要在html选择器中声明Font-size=62.5%（10÷16*100%=62.5%）就可以直接使用1rem=10px单位进行换算，其实这个算法是没有错的。可是，哪里来的自信让每个浏览器默认字体都是16px？？？？反正我也不知道自信哪来。。现在Chrome默认大小可以是12px也可以是16px，那么问题来了，国内浏览器，有几个不是用的谷歌内核。所以html选择器中声明Font-size=62.5%，1rem就等于10px的换算就有点坑爹了，对于我这种一个像素都纠结的人来说，很蛋疼。这坑是我当时买书学h5的时候预留下的后遗症，现在这个毛病还有，因为快和方便 T_T!真是矛盾。。。

坑可以填。rem单位还是可以变的容易换算和精准。所以就去找了些工具和资料。

因为rem是相对html的，那么只要将html选择器设置一个绝对大小的值：比如在html选择器设置font-size：20px；那么1rem=20px（解释下为什么是20而不是其他的，首先10的倍数容易计算，那为什么不是10本身而是20？现在Chrome最小的字体是12px，所以10px是无效的，进一步就取20px）；现在是不是和效果图一个像素都不差？！！！

且要兼容手机各个分别率，使用媒体查询media 可以设置不同的大小，这样在常规的设备中都可以精准到每一个像素。

这么换算来换算去好麻烦有木有！！所有发现了下面的换算工具，妈妈再也不用说我数学题不会做了！

下面是我直接在工具复制过来的现成rem换算适配代码↓（设计稿宽度：640，字体值：20）

@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
 html,body {
 font-size:16.875px;
 }
 }
 @media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
 html,body {
 font-size:15px;
 }
 }
 @media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
 html,body {
 font-size:12.5px;
 }
 }
 @media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
 html,body {
 font-size:11.25px;
 }
 }
 @media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
 html,body {
 font-size:10px;
 }
 }
 @media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
 html,body {
 font-size:9.375px;
 }
 }
 @media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
 html,body {
 font-size:8.4375px;
 }
 }
 @media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
 html,body {
 font-size:7.5px;
 }
 }
 @media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
 html,body {
 font-size:6.46875px;
 }
 }
 @media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
 html,body {
 font-size:6.25px;
 }
 }
 @media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
 html,body {
 font-size:5.859375px;
 }
 }
 @media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
 html,body {
 font-size:5.625px;
 }
 }
 @media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
 html,body {
 font-size:5px;
 }
 }
 @media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
 html,body {
 font-size:3.75px;
 }

离线版本：https://github.com/leon776/grunt-px2rem

在线版本：http://mxd.tencent.com/wp-content/uploads/2014/11/rem.html