在网页中，虽然px、em和rem都能用来标示尺寸，但是他们之间还是存在不同，互有优缺点。
px表示“绝对尺寸”，优点：设置px单位的元素尺寸和位置更稳定和精确。缺点：无法随着浏览器缩放动态变化。所以，在响应式网页中，尽量不使用px单位。
em表示“相对尺寸”，优点：尺寸大小可以随着设备屏幕大小变化。缺点：需要注意定义当前对象的字体尺寸，如果未定义，该尺寸则相对于浏览器默认字体尺寸。
rem是css3中新增的一个相对单位，rem其参考对象为根元素<html>的字体大小，所以只需要确定根元素的字体大小即可。
在浏览器中，默认字体大小为16px，在未经调整的浏览器中，1em=16px，如果改变html节点字体，则1em=改变后的字体大小。
注意：em还有一个特性就是继承，子节点继承父节点的字体大小。
在rem中，所有的节点都继承根HTML节点字体大小，当设置好HTML根节点字体大小时，页面上其他所有的节点字体大小都是1rem=当前HTML根节点定义像素大小
注意：在浏览器中，最小字体为12px。所以当设置字体大小为10px后，1rem也会等于12px，而1.2rem也等于12px。
在网页中，一般为了方便计算，会使用“62.5”来解决问题：
html { font-size:62.5% } /*=10px*/
body { font-size:1.4rem } /*=14px*/
div { font-size:2.4rem } /*=24px*/
在实际过程中，有些浏览器会不支持rem单位，则可以进行如下改进：
html { font-size:62.5% }
body {
font-size:14px;
font-size:1.4rem;
}
div {
font-size:24px;
font-size:2.4rem;
}
参考文章：https://www.zcfy.cc/article/understanding-and-using-rem-units-in-css-1411.html