Ems instead of px in Chrome developer tools?

Question

I use em everywhere in my styles, not px . But the calculated styles / metrics in the Chrome developer tools show me px by default, even for elements where I explicitly used em in the stylesheet:

(This is an image of the calculated lengths for the button with the icon from the Awesome font. I set the padding to 0.4em and I raised it to see how tall the icon is.) Of course, I can just divide everything by 16, but for numbers like "14.841" that are not so easy to do in my head. Is there any place to change the unit of length? (Like, for example, in most desktop graphics and graphics programs, where can I select pixels, dots, inches, or centimeters?) Is it either this, or is there somewhere else in the dev tools that can show lengths in ems? (Rulers, ...?)

Answer 1

The values ​​displayed on the Computed tab are calculated as follows :. Therefore, they are listed in units of “absolute” length, such as pixels, rather than a “relative” unit of length, such as ems, rems or percent, which base their size on some other criteria. For example, if you set the elment value to 100% of the width of the viewport, it will show you how many pixels are calculated by the width of the element, and there is no way to view the value in any other device. Similarly, since you are using ems, how large your icon is will be based on the inherited font size.

In fact, I have not tested this, but I think that the px values ​​shown on the calculated tab are technically displayed in the pixels of the device, not in the CSS pixels, since the CSS pixels themselves are relative length units (since their size is based on the device’s DPI on the screen) .

Relative length units

Absolute units of length