css - Chrome 开发人员工具中的 Ems 而不是 px？

Question

我在样式表中到处都使用 em 而不是 px。但是 Chrome 开发者工具中的计算样式/指标似乎默认显示给我 px，即使对于我在样式表中明确使用 em 的元素也是如此:

(这是一张带有来自 Font Awesome 的图标的按钮的计算长度的图片。我将填充设置为 0.4em，然后将其调高以查看图标的高度。)当然，我可以将所有内容除以16，但对于像“14.841”这样的数字，这在我脑海中并不容易。某处是否有更改长度测量单位的设置？ (有点像在大多数桌面图形和图像处理程序中，我可以在其中选择像素、点、英寸或厘米？)或者，或者开发工具中是否有其他地方可以以 em 为单位显示长度？ (统治者，……？)

Answer 1

Computed 选项卡上显示的值只是:computed。因此，它们以“绝对”长度单位(如像素)列出，而不是以“相对”长度单位(如 ems、rems 或百分比)列出，它们的大小都基于其他一些标准。例如，如果您将一个元素设置为视口(viewport)宽度的 100%，它会显示该元素的宽度计算为多少像素，并且没有选项可以以任何其他单位查看该值。同样，因为您使用的是 em，您的图标有多大将基于继承的字体大小值。

事实上，我还没有对此进行测试，但我认为计算选项卡上显示的 px 值在技术上以设备像素而非 CSS 像素显示，因为 CSS 像素本身是相对长度单位(因为它们的大小基于设备屏幕的 DPI)。

Relative Length Units

Absolute Length Units