CSS单位px、em、rem及它们之间的换算关系

作者:WangMin

格言:努力做好自己喜欢的每一件事

国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者的区别与优势是什么？接下来我们就来学习一下吧！

单位px、em、rem分别表示什么？

1、 px(Pixel) 相对于显示器分辨率而言，表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（这里的像素与设备的物理像素有一定的区别），利用px设置字体大小及元素宽高等比较稳定和精确。px的特点如下：

• IE无法调整那些使用px作为单位的字体大小；
• 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
• Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
• px不能适应浏览器缩放时产生的变化，因此一般不用于是响应式网站。

2、em 表示相对尺寸，其相对于当前对象内 (父级元素) 文本的字体尺寸 font-size（如当前对行内文本的字体尺寸未被设置，则相对于浏览器的默认字体尺寸。 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合：1em = 16px。）。使用em可以较好的相应设备屏幕尺寸的变化，但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size，如有遗漏可能会导致错误。em的特点如下：

• em的值并不是固定的；
• em会继承父级元素的字体大小。

3、rem 为css3新增的一个相对单位，使用rem为元素设定字体大小时，仍然是相对大小，但是rem只相对于HTML根元素的font-size，因此只需要确定这一个font-size。使用rem的好处是只修改根元素就可以成比例的调整所有字体的大小，又可以避免字体大小逐层复合的连锁反应。

目前，除了IE8及更早版本外，所有浏览器均已支持rem。以下是我在 caniuse对rem属性的兼容表：

对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。如下：

元素{
	font-size:14px;
	font-size:2rem;
}

rem、em与px间的换算关系

1、 px与em之间的换算关系

任意浏览器的默认字体大小16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em，这样换算起来有点麻烦，而且容易换算出错。所以，为了简化font-size的换算，我们可以制定一个单位换算基准：需要在css中的body选择器中声明font-size=62.5%，代码如下：

body{
    font-size:62.5% ;
}

这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。基准对照表如下图：

总结：我们在写CSS的时候，需要注意以下两点：

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

2）将你的需要转换的px数值除以10，然后换上em作为单位；

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

我们来举一个例子来说明一下：

<div>
	<p> 你猜我字体是多大？em</p>
</div>

body{
	font-size:62.5%;
}
div{
	font-size:1.2em; //font-size=10 *1.2 =12px
}
p{
	font-size:1.2em; //font-size= 12*1.2=14.4px
}

我们可以的到p的字体大小为14.4px，如下：

p的字体大小是怎么计算的呢？因为em相对于当前对象内 (父级元素) 文本的字体尺寸，p是div的子元素，div是body的子元素，要想的到p的字体大小就要先的到div的字体大小，因为body选择器中声明了font-size=62.5%，所以div的字体大小为1.2*10=12px，相当于div声明了font-size=75%（1em=12px），因为p：1.2em，所以p的字体大小转换为px:12*1.2=14.4px。这里就应证了em单位的缺点。

2、 px与rem之间的换算关系

从上面可以得到rem是一个相对大小的值，它相对于根元素，浏览器的默认字体尺寸也是16px。这时 px与rem之间的换算是1rem=16rem。下面是默认16px与rem之间的转换关系：

px	rem
12	12/16 = .75
14	14/16 = .875
16	16/16 = 1
18	18/16 = 1.125
20	20/16 = 1.25
24	24/16 = 1.5
30	30/16 = 1.875
36	36/16 = 2.25
42	42/16 = 2.625
48	48/16 = 3

比如假设，我们设置html的字体大小的值为html｛font-size: 87.5%;｝（也就是1rem=14px）。然后其他的字体大小就是将你要的值除以14得到的值加上 rem 单位。上面的14是个变量，相对于你对根元素html字体大小的设定，如果你设定的是62.5%，那除数就变成10了。如果你根元素的字体大小选62.5%，那px和rem之间的换算就是px直接除以10就得到rem了。为了简化font-size的换算，我们在html中也可以写入以下代码:

html{
  font-size: 62.5%;   /*  公式16px*62.5%=10px  */
}

此时，上面示例中所示的值将会改变:

px	rem
12	12/10 = 1.2
14	14/10 = 1.4
16	16/10 = 1.6
18	18/10 = 1.8
20	20/10 = 2.0
24	24/10 = 2.4
30	30/10 = 3.0
36	36/10 = 3.6
42	42/10 = 4.2
48	48/10 = 4.8

我们来举一个例子来说明一下：

<div>
	<p> 你猜我字体是多大？rem</p>
</div>

html{
  font-size: 62.5%;   /*  公式16px*62.5%=10px  */
}
div{
  font-size:2rem;
}
p{
  font-size:2rem;
}

我们可以得到p的字体大小转换为px为：20px



p的字体大小是怎么计算的呢？因为rem只相对于HTML根元素的font-size，所以rem 以html{ font-size: 62.5%; }为转换基准 公式16px*62.5%=10px相当于1rem=10px，然后就可以得到p的字体大小：10*2rem=20px。

注意：

• 若没有在根元素（html字体）指定参照值，那浏览器默认1rem 就是16px，若指定值，则1rem就是指定值 。
• html设置为62.5%或者10px 时会失效，是因为小于12px或者75%的字体大小不支持换算。这可能与有些浏览器不支持12px 以下的大小有关。所以，使用rem单位，html的字体默认字体大小必须设置为12px或以上。若小于12px则浏览器换算时自动默认字体为12px。

总的来说，为了简化font-size的换算，我们通常将rem与em的换算基准设置为 font-size : 62.5%; ，则此时1rem=1em = 16px * 62.5% = 10px， 这样10px = 1em=1rem，方便于我们使用。

---

以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! 后续继续更新!!