看了好多的文章，就只是在看他们的换算，没有实际做出例子所以一直很疑惑，不知道到底是怎么写的。今天写了一个demo。务必彻底弄清楚。
先说三者的区别：
首先是我们常见的px.
px：
em:相对长度单位。是相对于当前对象内文本的字体尺寸。如 当前对行内文本的字体尺寸未被认为设置，则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是 16px。1em=16px； 12px=0.75em；10px=0.625em;
所以为了font-size的换算，需要在css中body选择器中声明 Font-size:62.5%;之后的长度只需除以10，然后换上em单位，
em特点：
em的值并不是固定的，他会继承父级元素的字体大小。所以必须计算每一层的em数值，会很繁琐，不建议用。
rem. 相对长度单位。是相对于HTML根元素的。可以做到只修改根元素就成比例的调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
注:除了IE8以及更早的版本，所有浏览器都支持。(如果是 ie9+的就可以直接用rem,如果是考虑兼容性的就是 px，rem一起用。)
p{font-size:14px;font-size:0.875rem;} 14/16=0.875
移动版的，
原文：https://www.cnblogs.com/zxhh/p/7833842.html