摘要：的使用是相对于其父级的字体大小的，即倍数。浏览器的默认字体高都是，未经调整的浏览器显示。而且的关系不好转换，因此，常常人为地使。明显地，内部内的文字受到了父级的影响。
有何区别
px 在缩放页面时无法调整那些使用它作为单位的字体、按钮等的大小；
em 的值并不是固定的，会继承父级元素的字体大小，代表倍数；
rem 的值并不是固定的，始终是基于根元素 的，也代表倍数。
emem 的使用是相对于其父级的字体大小的，即倍数。浏览器的默认字体高都是 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。再举个例子：
Outer inner outer
body { font-size: 62.5%; }
span { font-size: 1.6em; }
结果：外层 为 body 字体 10px 的 1.6倍 = 16px，内层 为外层内容字体 16px 的 1.6倍 = 25px（或26px，不同浏览器取舍小数不同）。
明显地，内部 内的文字受到了父级 的影响。基于这点，在实际使用中给我们的计算带来了很大的不便。
rem引述 MDN:
rem values are relative to the root html element, not the parent element.
rem 的出现再也不用担心还要根据父级元素的 font-size 计算 em 值了，因为它始终是基于根元素（）的。
比如默认的 html font-size=16px，那么想设置 12px 的文字就是：12÷16=0.75(rem)
仍然是上面的例子，CSS改为：
html { font-size: 62.5%; }
span { font-size: 16px; font-size: 1.6rem; }
结果：内外 的内容均为 16px。
需要注意的是，为了兼容不支持 rem 的浏览器，我们需要在各个使用了 rem 地方前面写上对应的 px 值，这样不支持的浏览器可以优雅降级。兼容性详情。
选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用 rem，如果要考虑兼容性，那就使用 px，或者两者同时使用。
完。
参考淘宝UED：响应式十日谈第一日：使用 rem 设置文字大小
MDN: font-size
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111343.html
摘要：是相对长度单位。相对于当前对象内文本的字体尺寸。引自手册特点是新增的一个相对单位，根，这个单位引起了广泛关注。目前，除了及更早版本外，所有浏览器均已支持。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。 国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？ PX特点 IE无法调整那些使用px作为单位的字体大小； ...
摘要：中常见尺寸单位描述百分比英寸厘米毫米一个是一个字体的。在中，是非常有用的单位，因为它可以自动适应用户所使用的字体。在中唯一例外的是属性，它的和值指的是相对父元素的字体大小。 CSS 中常见尺寸 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。) pt ...
摘要：一绝对长度单位绝对长度单位代表一个物理测量，当输出介质的物理性质是已知的，如用于打印布局。对于打印机和高分辨率的屏幕，一个意味着多个设备像素，因此，每英寸的像素的数量保持在左右。是新增的单位，等于根元素的字体大小。 一、绝对长度单位 绝对长度单位代表一个物理测量，当输出介质的物理性质是已知的，如用于打印布局。这是通过将一个单元锚定到一个物理单元，并将其定义为相对于它的另一个。对于低分辨...
摘要：引自手册是相对长度单位。所有未经调整的浏览器都符合。特点是新增的一个相对单位，根，这个单位引起了广泛关注。目前，除了及更早版本外，所有浏览器均已支持。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。 在他处看到一篇好文章，想记录在自己的学习笔记中，原文作者看到我转载若是介意，联系我立马就删除，附上原文链接：http://www.huolg.net/html5/htm...
摘要：前言在自适应布局或者移动端网页开发时，我们经常会用到和两个长度单位。，相对长度单位。相对于当前对象内文本的字体尺寸。所有未经调整的浏览器中都是。最大的优点是提供一致尺寸，便于计算。为了还原设计稿和实现合理的布局所以需要根元素重写。 前言 在自适应布局或者移动端网页开发时，我们经常会用到em和rem两个长度单位。接下来我们讨论一下这两个单位和px之间的区别，以及他们的使用场景等。 区别 ...
阅读 2036·2021-10-08 10:04
阅读 3013·2021-09-22 10:02
阅读 2202·2019-08-30 15:56
阅读 796·2019-08-30 15:54
阅读 857·2019-08-30 15:54
阅读 1251·2019-08-30 15:53
阅读 2486·2019-08-30 11:21
阅读 3531·2019-08-30 10:56
