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，方便于我们使用。
以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! 😄 后续继续更新!!
