我听说你应该在样式表中用em而不是像素来定义大小和距离。所以问题是，在CSS中定义样式时，为什么要使用em而不是px？有没有一个很好的例子可以说明这一点？
当前回答
它适用于根据字体大小进行缩放的所有内容。
它在通过缩放字体大小实现缩放的浏览器上特别有用。因此，如果使用em调整所有元素的大小，它们会相应地缩放。
其他回答
像素是绝对单位，而rem/em是相对单位。更多信息：https://drafts.csswg.org/css-values-3/
当您希望字体大小根据系统的字体大小进行调整时，应使用相对单位，因为系统将字体大小值提供给根元素（即HTML元素）。
在这种情况下，如果网页在Google Chrome中打开，HTML元素的字体大小由Chrome设置，请尝试更改它，以查看使用rem/em单位字体的网页的效果。
如果使用px作为字体单位，字体将不会调整大小，而使用rem/em单位的字体将在更改系统字体大小时调整大小。
因此，如果您希望大小固定，请使用px；如果您希望系统大小自适应/动态，请使用rem/em。
我有一台高分辨率的小型笔记本电脑，必须以120%的文本放大率运行Firefox，才能不斜视地阅读。
许多网站都有这样的问题。布局变成乱码，按钮中的文本被切成两半或完全消失。就连stackoverflow.com也深受其苦：
注意顶部按钮和页面选项卡如何重叠。如果他们使用em单位而不是px，就不会有问题。
它适用于根据字体大小进行缩放的所有内容。
它在通过缩放字体大小实现缩放的浏览器上特别有用。因此，如果使用em调整所有元素的大小，它们会相应地缩放。
例子：
代码：body｛font-size:10px；｝//保持10以下所有大小正确，更改此值，其余更改为该值的1.4
1｛font-size:1.2em；｝//12px
2｛font-size:1.4em；｝//14px
3｛font-size:1.6em；｝//16px
4｛font-size:1.8em；｝//18px
5｛字体大小：2em；｝//20px
…
body
1
2
3
4
5
通过改变身体中的值，其余部分会自动改变为基础值的一倍…
10×2=2010×1.6=16等
你可以将基值设为8px…所以8×2=168×1.6=12.8//可由浏览器舍入
如果您想使用px来指定字体大小，但仍然希望em通过将其放在CSS文件中提供可用性，那么有一个简单的解决方案：
body {
font-size: 62.5%;
}
现在指定p（和其他）标记如下：
p {
font-size: 0.8em; /* This is equal to 8px */
font-size: 1.0em; /* This is equal to 10px */
font-size: 1.2em; /* This is equal to 12px */
font-size: 2.0em; /* This is equal to 20px */
}
等等
