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