em： 相对长度单位。相当于当前对象内文本的字体尺寸，如果当前对行内文本的字体尺寸未被认为设置，则相对于浏览器的默认字体尺寸。em的值并不是固定的，它会继承父级元素的字体大小。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。 （em是根据标签元素自身的font-size来计算（宽高设置根据当前元素font-size），而元素自身的font-size又受他父级元素的font-size的影响，这很容易导致错误。而em计算单位的唯一优势就是它的兼容效果更佳。）
rem： CSS3新增的一个相对单位。 rem 是相对于根元素<html>，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。 （一改全改，根据html的根元素标签的font-size的大小来计算）
因为HTML的根元素标签的font-size为100px；
那么 width=5rem*100px=500pxheight=2.5rem*100px=250px
参考 https://blog.csdn.net/w390058785/article/details/80223717
rem是什么？
px，绝对长度单位，最常用
em，相对长度单位，相对于父元素，不常用
rem，相对长度单位，相对于根元素，常用于响应式布局
响应式布局的常用方案
media-query,根据不同屏幕宽度设置根元素font-size
rem,基于根元素的相对单位
rem的弊端：“阶梯性”
