CSS CSS Basics Understanding Values and Units Percentages

Matthew Francis
Matthew Francis
6,967 Points

Pixels as a unit

I'm confused does a pixel scale properly with different sizes? Say a screen size for a A is 10 pixels per inch, and for screen size B, it's 20 pixels per inch. if I set a <div> with 40 pixels. It would be 4 inches in screen A; but it would be 2 inches in size B; correct?

1 Answer

Steven Parker
Steven Parker
179,882 Points

You're basically correct. One additional consideration would be if your operating system offers display scaling (as does Windows 10). This creates a virtual screen resolution that can be different from the actual physical resolution.

Matthew Francis
Matthew Francis
6,967 Points

One additional consideration would be if your operating system offers display scaling (as does Windows 10). This creates a virtual screen resolution that can be different from the actual physical resolution.

How would that affect the <div> in the screen? An example would be great!

Steven Parker
Steven Parker
179,882 Points

A div with a width of 144px shown on a 72 DPI display would normally be 2 inches across. But if the screen had a display scaling factor of 150%, then it would be 3 inches.

So even though the screen was physically 72 DPI, the "virtual resolution" would be 48 DPI.

Matthew Francis
Matthew Francis
6,967 Points

Are there any scenarios where we would use absolute units like pixels? It seems that they serve no purpose since they will cause problems for compatibility.

Steven Parker
Steven Parker
179,882 Points

Sure, there are times when you'd rather something stay a certain size and be scrolled rather than shrink down on a small screen to become difficult to see.