Chrome 开发者工具中的 Ems 而不是 px？答案

【问题标题】：Ems instead of px in Chrome developer tools?Chrome 开发者工具中的 Ems 而不是 px？
【发布时间】：2014-12-19 03:22:35
【问题描述】：

我在样式表中的任何地方都使用ems，而不是px。但 Chrome 开发者工具中计算的样式/指标似乎默认显示px，即使对于我在样式表中明确使用ems 的元素：

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

【问题讨论】：

对我来说不幸的是，我不熟悉如何更改单位，但我通常单击小箭头（例如，在您的图片中，-webkit-appearance:none）它会显示我的数字那个元素。因此，如果我在单击小箭头时使用padding:1em，它会按照您的要求显示 EM 值中的 padding-top、padding-bottom 等。
"当然，我可以将所有内容除以 16"...是的，但是由于继承，em 可能不是 16px。在rem 可能，但即使是可调整的。使用px 的固定已知“度量”更为合乎逻辑。

标签： css google-chrome-devtools units-of-measurement

【解决方案1】：

计算选项卡上显示的值就是：计算。因此，它们以像像素这样的“绝对”长度单位列出，而不是像 ems、rems 或百分比这样的“相对”长度单位，它们的大小都基于其他一些标准。例如，如果您将一个元素设置为视口宽度的 100%，它将显示元素的宽度计算为多少像素，并且无法以任何其他单位查看该值。同样，因为您使用的是 em，所以您的图标有多大将取决于继承的 font-size 值。

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

Relative Length Units

Absolute Length Units

【讨论】：

它们似乎是 CSS 像素。例如，如果我放大到 175%，则边框（定义为 1px）计算为“0.571”单位。这是因为在 175% 缩放时，1 个设备像素是 0.571 CSS 像素。如果我放大到 200%，那么 1 个设备像素是 0.5 个 CSS 像素，所以边框将是 2 个设备像素，计算选项卡显示“1”（CSS 像素）。所以计算的选项卡显示了一个相对长度单位，只是对我最没用的一个。
啊，是不是很有趣……好像是这样。 Firefox 和 Safari 的行为似乎也相同，显示所有计算长度的 px 单位，而在任何其他单位中没有明显的方式看到它。我不知道这是为什么。也许提交功能请求？
奇怪的是，您可以选择以哪些单位颜色显示（hex、rgb、hsl），但如果您更改设置，则只有某些属性采用新单位。