css – 在Chrome开发者工具中使用Ems而不是px?

前端之家收集整理的这篇文章主要介绍了css – 在Chrome开发者工具中使用Ems而不是px?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在样式表中使用ems而不是px.但Chrome Developer Tools中计算出的样式/指标似乎默认显示为px,即使对于我在样式表中明确使用ems的元素:

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

解决方法

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

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

Relative Length Units

Absolute Length Units

猜你在找的CSS相关文章