在Chrome开发者工具中使用Ems而不是像素(px)？

Question

我在样式表中使用的是em，而不是px。但是，在Chrome开发者工具中计算样式/度量似乎默认显示px，即使我在样式表中明确使用了em：

（这是一个带有Font Awesome图标的按钮的计算长度图片。 我将填充设置为0.4em，并将其提高以查看图标的高度。）当然，我可以把所有内容都除以16，但对于像“14.841”这样的数字，在我的脑海中并不容易做到。是否有某个设置可以改变长度测量单位呢？（就像大多数桌面图形和图像处理程序一样，我可以选择像素、点、英寸或厘米吗？）或者，在开发工具中是否有其他地方可以显示em的长度？ （比如标尺，...？）

- Wandering Logic

---

很不幸，我不太熟悉如何更改单位，但通常我会点击小箭头（例如在您的图片中显示为-webkit-appearance:none），然后它会显示该元素的数字。因此，如果我使用了padding:1em，当我点击小箭头时，它会显示所请求的EM值的padding-top、padding-bottom等。 - Arty

“当然，我可以将所有东西除以16”……是的，但是由于继承，em可能不是16px。 在rem中可能是这样，但即使那也是可以调整的。使用一个固定的、已知的“度量单位” px 更为合理。 - Paulie_D

Answer 1

在计算选项卡中显示的数值仅仅是计算出来的数值。因此，它们以"绝对"长度单位像像素而不是"相对"长度单位像ems、rems或百分比列出，后者都以其他标准为基础确定其大小。例如，如果您将一个元素设置为100%视口宽度，它会显示元素的宽度计算出多少像素，并且没有选择以任何其他单位查看该值的选项。同样，因为您使用了ems，所以您的图标有多大将基于继承的字体大小值。

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

相对长度单位

绝对长度单位

- Brad Marshall

---

它们似乎是CSS像素。例如，如果我缩放到175％，边框（定义为1px）将被计算为“0.571”单位。这是因为在175％缩放时，1个设备像素为0.571 CSS像素。如果我缩放到200％，那么1个设备像素就是0.5 CSS像素，因此边框将为2个设备像素，而计算选项卡会显示“1”（CSS像素）。因此，计算选项卡显示的是相对长度单位，只是对我最没有用的单位。 - Wandering Logic

啊，这很有趣......看起来是这样。Firefox和Safari似乎也表现出相同的方式，对于所有计算长度都显示px单位，似乎没有其他单位的显示方式。我想知道这是为什么。也许可以提交一个功能请求？ - Brad Marshall

奇怪的是，你可以选择哪些单位颜色出现（十六进制、RGB、HSL），但如果你改变设置，只有某些属性会采用新的单位。 - Brad Marshall