DEV Community

Discussion on: Most Common CSS Units Of Measure Explained

Collapse
 
willemodendaal profile image
Willem Odendaal

How can pixels have a constant relation to inches?
A pixel at 1080p on my 17" laptop is surely much smaller (physically) than a pixel at 1080p on my 50" tv?

Collapse
 
flippedcoding profile image
Milecia

Sorry for the confusion guys. I was thinking pt and typing px. D'oh! But I've corrected it above.

Just for clarity, px maps to a pixel on your screen. Pt are the units that are 1/72 of an inch.

Collapse
 
blamrob profile image
💥Blam

I usually explain px by saying to think of it as "1/72" of an inch. Prior to "retina" and other pixel dense screens, it was simply one pixel on the screen. However it doesn't really mean that anymore.

I still encounter people who were told never to use px. However, if you use the "computed" panel in the web inspector, you can see that, ultimately, all units of measurement get converted to pixels anyway. That doesn't mean that other units don't have their advantages, but I do tend to use pixels most of the time. With a few exceptions.

Collapse
 
dploeger profile image
Dennis Ploeger

I was immediately confused as well. I guess, the author got that one pretty wrong.

Collapse
 
bitifet profile image
Joan Miquel Torres • Edited

px aren't pixels.

They are more like an "average pixel" that browsers should scale to real pixels.

This way they are much similar to actual pixels in which developers are accustomed to think in while mantaining their average real size across devices.

Collapse
 
willemodendaal profile image
Willem Odendaal

I read a bit more about this, and it seems that a Joan is correct. A "CSS pixel" is different from a hardware pixel.

"A CSS pixel, on the other hand, is designed to be roughly equivalent across devices. If you load the same website on side-by-side devices with a similar physical dimensions, but different pixel ratios, the website will appear to be roughly the same visual size."

A good read: juiceboxinteractive.com/blog/a-pix...