概要
说起适配各种移动端，肯定要说em和rem，也看过很多博客介绍，一直的印象是em计算依据父元素font-size，rem计算依据html的font-size，在实际开发中利用的也不是很好，今天发现了一篇好内容，总结什么时候该用，以及用哪一种好，分享链接
Em
之前有个误解，以为em单位是相对于父元素的font-size，但实际是相对于本元素的font-size，之所以会受父元素的影响，完全是因为本元素继承了父元素的font-size
验证这个问题，对比下父元素有font-size时，本元素分别设置和不设置font-size
父元素有font-size:20px，本元素没有设置，从父元素继承而来，本元素设置padding:1.5em，那么padding计算的结果应该是20*1.5=30px
以上基础下，本元素设置font-size:30px，如果单纯的理解成em是依据父元素font-size计算，那么padding计算结果应该不变，但是实际不是，padding的最终计算结果是30*1.5=45px，所以em是依据本元素的font-size
em单位取决于一个font-size值而非html元素的字体大小。
为此，
em单位的主要目的应该是允许保持在一个特定的设计元素范围内的可扩展性。
例如，可能使用
em值设置导航菜单项的padding、margin，line-height等值。
Rem
rem单位是相对于根元素html的font-size，而html的font-size默认继承浏览器的字体大小（所以如果html没有设置字体大小继承浏览器的字体大小，那么使用em直接表现为受浏览器默认字体大小的影响），除非设置html的字体大小，而浏览器字体大小通常默认是16px，用户可以更改为9px至72px的任意值，
rem单位提供最伟大的力量并不仅仅是他们提供一致尺寸而不是继承。 相反，它给我们的一个途经去获取用户的偏好来影响网站中每一处使用rem的元素大小，不再是使用固定的px单位。
为此，使用
rem单位的主要目的应该是确保无论用户如何设置自己的浏览器，我们的布局都能调整到合适大小。
同时不建议使用结合rem单位的方式给html元素设置了一个固定的px单位，因为它重写继承了用户设置的浏览器字体大小，这剥削了用户自行调整以获得最佳视觉效果的能力，倒是可以通过em或者rem单位来重新设置html的字体大小，这样根元素的值是用户浏览器字体大小的乘积，仍会保留用户的浏览器设置的效果
总结
两者差距对比：
+++rem单位翻译为像素值是由html元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。
+++em单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写一个具体单位。
使用em情况：
需要使用
em单位的唯一原因是缩放没有默认字体大小的元素，适用于在非默认字体大小的元素上的padding、margin、width、height和line-height等值，比如设计组件比如按钮，菜单和标题，当修改字体大小的时候，希望整个组件都适当缩放；
通常不使用
em单位控制字体大小，建议使用rem单位设置字体大小，以保留的可扩展性，但避免继承混淆；
少部分不想字体大小根据根元素做调整的情况：1.使用
em字体大小的下拉菜单，存在第二个级别的菜单项文本大小取决于第一级字体大小； 2.在按钮里面的字体图标，字体图标的大小跟按钮的文本大小有关。
使用rem的情况：
根据浏览器的字体大小设置缩放的任何尺寸，包括
heights，widths，padding，margin，border，font-size，shadows，几乎包括你布局的每部分，简单地说，一切可扩展都应该使用rem单位；
创建布局时，往往要以像素为单位更方便，但部署时应使用
rem单位,可以使用预处理比如Stylus / Sass / Less，来自动转换单位或PostCSS之类的插件，或者可以使用 PXtoEM 手动做转换；
当使用
rem单位创建统一可扩展的设计，媒体查询也应该是rem单位，这可确保，无论用户浏览器的字体大小，媒体查询会对它作出反应和调整布局
不能使用em或者rem：
多列布局：布局中的列宽通常应该是
%，因此他们可以流畅适应无法预知大小的视区，然而单一列一般仍然应使用rem值来设置最大宽度
例如:
.container {
width: 100%;
max-width: 75rem;
}
这保持列的灵活，可扩展，又能防止变得太宽了
当元素应该是严格不可缩放的时候：在一个典型的
web设计的过程中，不会有很多部分你不能使用伸缩性设计的布局，不过偶尔会遇到真的需要使用显式的固定的值，以防止缩放的元素
采用固定的尺寸值的前提应该是，如果被缩放的话，它的结构会被打碎，这不常出现，所以想拿出那些px单位之前，要确定是否使用它们是绝对必要的