css为我们提供了非常多的尺寸单位，字体经常使用的单位包括以下几种：
单位那么多我们如何根据我们的需求选择对应字体单位？我们经常接触的就是单位px，因为它简洁明了，人们可以直接读取它的数值，所以备受人们的青睐。
随着智能设备出现，我们常常需要在不同设备之间进行切换。但移动设备屏幕分辨率相对小于传统计算机显示器，根据px的特性可能会出现布局问题。正是由于px的缺点，当涉及到继承关系、响应式布局时，我们通常使用的字体单位就是em和rem这两个单位。那么，这两者之间有何区别呢？
通过上图我们可以了解到em和rem都是相对长度单位，都是以倍数关系确定长度的，只是两者的参照物不一样。
（a）、em的参照对象为父元素，如果没有向上继承，则参照对象为其自身。
（b）、rem的参照对象为根元素，即<html>标签。
代码走起
【 HTML代码 】
<div class="container">
<div id="test1">这是text1文本
<div id="text2">这是text2文本
<div id="text3">这是text3文本
</div></div></div></div>
<br /><br />
<div class="container">
<div id="box1">这是Box1文本
<div id="box2">这是Box2文本
<div id="box3">这是Box3文本
</div></div></div>
</div>
【 CSS样式 】
html{font-size: 24px;font-family: "微软雅黑";color: #333;}
body{font-size: 16px;}
#text1{font-size: 1em;}
#text2{font-size: 2em;}
#text3{font-size: 3em;}
#box1{ont-size: 1rem;}
#box2{font-size: 2rem;}
#box3{font-size: 3rem;}
【 结果 】
从上面的三幅图我们可以看出，em和rem之间的关系（由于向下继承的关系，所以container的字体大小为16px）
em中，text1是container的1倍为16px，text2是text1的2倍故为32px，而text3是text2的3倍故为96px
rem中，text1是html的1倍故为16px，text2是html的2倍故为32px，text3是html的3倍故为72px
从上述的介绍和例子我们可以看出，em和rem的区别挺明显的。其实无论是台式还是移动端开发，两者其实都可以使用，只不过em需要注意继承关系，并且需要修改多个内容，而rem恰恰相反，所以rem更适合移动式开发。也就是说，em是以自身父容器为参考对象的，而rem直接以HTML为参考对象的，在多层嵌套的情况下使用em很容易出现问题。
247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
