px/em/rem的区别

• px 在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小；

• em 的值并不是固定的，会继承父级元素的字体大小，代表倍数；

• rem 的值并不是固定的，始终是基于根元素 <html> 的，也代表倍数。

em

em = 希望得到的像素大小 / 父元素字体像素大小

浏览器的默认字体高都是 16px，未经调整的浏览器显示 1em = 16px。1em = 16px 不好转换，人为地使 1em = 10px。

默认时字体 16px = 100%，则有 10px = 62.5%。所以首先在 body 中全局声明 font-size=62.5%=10px，也就是定义了网页 body 默认字体大小为 10px，由于 em 有继承父级元素字体大小的特性，如果某元素的父级没有设定字体大小，那么它就继续了 body 默认字体大小 1em = 10px。

但是由于 em 是相对于其父级字体的倍数的，当出现有多重嵌套内容时，使用 em 分别给它们设置字体的大小往往要重新计算。

rem

始终是基于根元素（<html>）的。

为了兼容不支持 rem 的浏览器，我们需要在各个使用了 rem 地方前面写上对应的 px 值，这样不支持的浏览器可以优雅降级。

px

一像素的大小是固定的。这是一个不取决于平台的、跨浏览器的准确设置字体大小高度为你所想的像素大小的方法。