以下为读http://www.w3cplus.com/css/when-to-use-em-vs-rem.html的感悟，收获满满！
1、当元素A的字体单位是n rem时，它将根据根元素（html）的font-size的大小作为基准，比如
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html{font-size: 0.625rem;}
.rem-div{background-color:#FFCC66;width: 10rem;height:20rem;font-size:2rem}
.em-div{background-color:#17B8E8;width: 10em;height: 20em;font-size: 2rem;}
.parent-div{background-color:#CCCCCC;font-size: 3rem;}
.em-div-none{background-color:#228811;width: 10em;height: 20em;}
.em-div-child{font-size: 0.9em;}
.em-div-fontem{background-color: #FFCC66;width: 10em;height: 20em;font-size: 2em;}
</style>
</head>
<body>
<div class="rem-div">我的字体单位是rem</div>
<div class="em-div">我的字体单位是em</div>
<div class="parent-div">
我是父元素，字体单位是3rem
<div class="em-div-none">我是父元素中的子元素，字体单位是em,我不设置自己的字体大小</div>
<div class="em-div-fontem">我是父元素中的子元素，字体单位是em</div>
<div class="em-div">
我是父元素中的子元素，字体单位是rem,我自己的字体大小为2rem,不受父元素影响，依赖根元素
<div class="em-div-child">我是二级菜单，字体要继承父元素，并且比父元素字体小，字体单位是em</div>
</div>
<div class="rem-div">我是父元素中的子元素，字体单位是rem</div>
</div>
</body>
</html>
parent-div中的em-div的font-size为2rem,他的基准就是html的字体大小10*2=20,并不受父元素的影响。width:10em;就是20*10，即宽度为200px;
2、重点理解:
有一个比较普遍的误解，认为 em 单位是相对于父元素的字体大小。 事实上，它们是相对于使用em单位的元素的字体大小。
父元素的字体大小可以影响 em 值，但这种情况的发生，纯粹是因为继承。
使用 em 单位存在继承的时候，情况会变得比较棘手，因为每个元素将自动继承其父元素的字体大小。 继承效果只能被明确的字体单位覆盖，比如px,vw。
使用 em 单位的元素字体大小根据它们来定。 但该元素可能继承其父元素的字体大小，而父元素又继承其父元素的字体大小，等等。 因此，以 em 为单位的元素字体大小可能会受到其任何父元素的字体大小影响。
可以通过比较以上代码中带有em-div-none和em-div-fontem样式的div可以看出差别。
3、当 em 单位设置在 html 元素上时，它将转换为em值乘以浏览器字体大小的设置，来作为html的font-size大小。那么，10em就是10*html的font-size;
4、总结 rem与 em 差异
-
rem单位翻译为像素值是由html元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。 -
em单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位。
5、rem 单位提供最伟大的力量并不仅仅是他们提供一致尺寸而不继承。
重要的是:
一些设计师使用结合 rem 单位的方式给html元素设置了一个固定的px单位。 这是很普遍的做法，所以改变html元素的字体大小时，可以使整个页面做相应调整
这样的话，它重写继承了用户设置的浏览器字体大小。但是，这剥削了用户自行调整以获得最佳视觉效果的能力。
如果您确实需要更改 html 元素的字体大小，那么就使用em，rem单位，这样根元素的值还会是用户浏览器字体大小的乘积。
这将允许您通过更改您的 html 元素的字体大小，调整你的设计，但仍会保留用户的浏览器设置的效果。
6、em 单位取决于一个font-size值而非 html 元素的字体大小。
主要适用于：
设计组件比如按钮，菜单和标题可能会有自己明确的字体大小。 当你修改字体大小的时候，你希望整个组件都适当缩放。
通用属性这一准则将适用于在非默认字体大小的元素上的padding、 margin、 width、 height和line-height等值。
当您使用 em 单位，他们使用的元素的字体大小应设置对rem单位，以保留的可扩展性，但避免继承混淆。
7、使用 em 单位:
根据某个元素的字体大小做缩放而不是根元素的字体大小。
一般来说，你需要使用 em 单位的唯一原因是缩放没有默认字体大小的元素。
根据我们上面的例子，设计组件比如按钮，菜单和标题可能会有自己明确的字体大小。 当你修改字体大小的时候，你希望整个组件都适当缩放。
通用属性这一准则将适用于在非默认字体大小的元素上的padding、 margin、 width、 height和line-height等值。
我建议，当您使用 em 单位，他们使用的元素的字体大小应设置对rem单位，以保留的可扩展性，但避免继承混淆。
通常不使用 em 单位控制字体大小
我们经常会看到使用em作为字体大小单位，特别是标题，当我认为如果使用rem将更具可扩展性。
标题经常使用 em 单位的原因是他们相比px单位，在相对常规文本大小方面更出色。 然而 rem 单位同样也可以实现这一目标。 如果 html 元素上任何字体大小调整，标题大小仍会缩放。
我们可以想到的例子是一个使用 em 字体大小的下拉菜单，我们有第二个级别的菜单项文本大小取决于第一级字体大小。 另一个例子可能是用在按钮里面的字体图标，字体图标的大小跟按钮的文本大小有关。
然而，大多数 Web 设计中的元素往往不会有这种类型的要求，所以一般使用 rem 单位的字体大小，em 单位只在特殊的情况下使用。
8、这里理解的不到位，先记录下来。
始终使用 rem 单位做媒体查询
特别注意，当使用 rem 单位创建统一可扩展的设计，媒体查询也应该是rem单位。 这将确保，无论用户浏览器的字体大小，您的媒体查询会对它作出反应和调整您的布局。
例如，如果用户缩放文本非常高，您的布局可能需要从两列到单个列调整，因为它可能会在较小的移动设备上显示。
如果您的断点在固定的像素宽度，只有不同的视口的大小可以触发它们。 但是基于 rem 的断点他们将响应不同的字体大小
9、
不要使用 em 或 rem的情况 :
多列布局
布局中的列宽通常应该是 %，因此他们可以流畅适应无法预知大小的视区。
然而单一列一般仍然应使用 rem 值来设置最大宽度。
当元素应该是严格不可缩放的时候
在一个典型的 Web 设计的过程中，不会有很多部分的你不能使用伸缩性设计的布局。 不过偶尔你会遇到真的需要使用显式的固定的值，以防止缩放的元素。
采用固定的尺寸值的前提应该是，如果被缩放的话，它的结构会被打碎。 这真的不常出现，所以你想拿出那些 px 单位之前，问问自己是否使用它们是绝对必要的。
10、
总结
让我们以一个快速符号点概括我们介绍的内容:
-
rem和em单位是由浏览器基于你的设计中的字体大小计算得到的像素值。 em单位基于使用他们的元素的字体大小。rem单位基于html元素的字体大小。em单位可能受任何继承的父元素字体大小影响rem单位可以从浏览器字体设置中继承字体大小。- 使用
em单位应根据组件的字体大小而不是根元素的字体大小。 - 在不需要使用
em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。 - 使用
rem单位，除非你确定你需要em单位，包括对字体大小。 - 媒体查询中使用
rem单位 - 不要在多列布局中使用
em或rem,改用%。 - 不要使用
em或rem，除非缩放会不可避免地导致要打破布局元素。