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

Question

我em在样式表中到处使用s而不是px.但Chrome Developer Tools中计算出的样式/指标似乎默认显示给我px,即使对于我em在样式表中明确使用s的元素:

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

Answer 1

Computed选项卡上显示的值只是:computed.因此,它们以像素的"绝对"长度单位列出,而不是像ems,rems或百分比那样的"相对"长度单位,它们的大小都基于其他一些标准.例如,如果将元素设置为视口宽度的100%,它将显示元素宽度计算的像素数,并且没有选项可以查看任何其他单位的值.同样,因为您使用的是ems,所以图标的大小将取决于继承的字体大小值.

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

相对长度单位

绝对长度单位