1em并不是固定等于多少像素的，是根据元素的字体大小而定，如果是等宽字体，1em就是1个字符的宽度，如果是比例字体（只有英文字体才有）则1em等于英文大写字母“M”的宽度。操作方法如下：
1、首先新建一个html和css文档。
2、chrome默认是16px大小。
3、1em就是继承父元素不变。
4、2em这里就是32px。
5、1rem在这里也是16px，因为浏览器默认16px。
rem单位是相对于根节点的字体大小的，所以通过设置根节点的字体大小可以动态的改变rem的大小rem方案的原理其实就是，将每一个不同的屏幕划分成相同的份数，让同一个元素在不同的屏幕上占据相同比例的空间。1rem等于此页面html的font-size，rem可以理解为每份是多少px
比如，设计稿宽度为375px，将页面划分成10份，那么1rem=37.5px，如果有一个div宽度为37.5px，换算成rem为1rem。将375px宽的屏幕划分为10份，这个div宽度占一份。
即 document.body.clientWidth / 10
同理，如果我们想让1rem=10px，那么document.body.clientWidth / 37.5即可
npm install amfe-flexible
import 'amfe-flexible'
此时默认，1rem = 16px，可以看到Elements中 <html lang="en" style="font-size: 16px">
在现在的htmlUI设计图中，右上角可选择切换单位，切换到 CSS Rem 16px，即可得到对应的rem标注，不需要手动换算
（若想更改rem和px的换算比例，参考第三步）
此时 1rem = 10px，可以看到Elements中 <html lang="en" style="font-size: 10px">
rem是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
示例：
div { font-size : 1.2em}
rem与px的换算
1rem=16px, 12px=0.75rem
如果将rem换算后html{font-size:62.5%}，1rem=10px.
首先，rem是以html为基准。
一般的，各大主流浏览器的font-size默认值为16px,此时1rem=16px。如果此时将rem与px进行换算很麻烦，比如0.75rem=12px。
为了更方便的进行换算（比如1：10），就可以加样式：
16px*0.625 = 10px
设置了62.5%以后就有 1rem=10px，便于用rem指定元素的尺寸（比如1.2rem=12px,1.4rem=14px），这样响应式的时候就可以直接改变font-size而无需计算其他各种样式中出现的尺寸了。
用rem定义尺寸的另一个好处是更能适应 缩放／浏览。
