Most Common CSS Units Of Measure Explained

Milecia McG on September 27, 2018

When you look through CSS and you start seeing the different units of measure, it's helpful to know exactly what they do. To help you better unders... [Read Full]
markdown guide
 

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?

 

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.

 

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...

 

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

 

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.

 

When do you use a specific measure over the others? Thanks!

 

A lot of it comes down to preference, but usually percentages are used for block level elements like <div>.

If you need something that's a fixed size you'd probably go with px.

The others are just a toss up.

 

I guess vh and vw measures will be more helpful because it adjust based on screen size. But yes, each measure have it's own importance.

 

Thanks Milecia for the post.

I always get confused between rem & em and the post made it clearer for me.

 

Thanks for the explanation. It was simply put and understandable.

 
 

Thanks for the short explanation! I'm getting into CSS and this really comes in handy.

 
 
code of conduct - report abuse