px 、em 和 rem的区别 #37
Labels
CSS
CSS 的知识点
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
{{ message }}
CSS 的单位 px、em、rem 的区别和使用场景
PX
px 像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。有一个问题点有时候每个设备的显示分辨率不一样，固定的px会固态化不能适应多设备场景。如果为字体font-size设定 px。字体也不能动态变化。
EM
em是相对长度单位。相对于当前对象font-size 的单位，会继承父级元素的字体大小，即倍数。浏览器的默认字体高都是 16px，未经调整的浏览器显示 1em = 16px。但是有一个问题，如果设置 1.2em 则变成 19.2px，问题是 px 表示大小时数值会忽略掉小数位的（你想像不出来半个像素吧）。而且 1em = 16px 的关系不好转换，因此，常常人为地使 1em = 10px。这里要借助字体的 % 来作为桥梁。
因为默认时字体 16px = 100%，则有 10px = 62.5%。所以首先在 body 中全局声明 font-size=62.5%=10px，也就是定义了网页 body 默认字体大小为 10px，由于 em 有继承父级元素字体大小的特性，如果某元素的父级没有设定字体大小，那么它就继续了 body 默认字体大小 1em = 10px。
但是由于 em 是相对于其父级字体的倍数的，当出现有多重嵌套内容时，使用 em 分别给它们设置字体的大小往往要重新计算。比如说你在父级中声明了字体大小为 1.2em，那么在声明子元素的字体大小时设置 1em 才能和父级元素内容字体大小一致，而不是1.2em（避免 1.2*1.2=1.44em）, 因为此 em 非彼 em。再举个例子：
<span>Outer <span>inner</span> outer</span>body { font-size: 62.5%; } span { font-size: 1.6em; }结果：外层
<span>为 body 字体 10px 的 1.6倍 = 16px，内层<span>为外层内容字体 16px 的 1.6倍 = 25px（或26px，不同浏览器取舍小数不同）。明显地，内部
<span>内的文字受到了父级<span>的影响。基于这点，在实际使用中给我们的计算带来了很大的不便。em 注意规则:
REM (CSS3)
rem 也是相对长度单。 rem 是相对于根元素 (
<html>) 的单位，rem的出现再也不用担心还要根据父级元素的 font-size 计算 em 值了。因为它始终是基于根元素（<html>）的。比如默认的 html font-size=16px，那么想设置 12px 的文字就是：12÷16=0.75(rem)
仍然是上面的例子，CSS改为：
html { font-size: 62.5%; } span { font-size: 16px; font-size: 1.6rem; } //定义 rem 的同时也定义 px,进行降级结果：内外 的内容均为 16px。
需要注意的是，为了兼容不支持 rem 的浏览器，我们需要在各个使用了 rem 地方前面写上对应的 px 值，这样不支持的浏览器可以优雅降级。
em 和 rem 在什么场景下使用最合理呢？
参考一下这两篇外文
外文引用
The text was updated successfully, but these errors were encountered: