Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Understanding Values and Units Percentages

Matthew Francis
Matthew Francis
6,967 Points
Posted by 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
229,644 Points
Steven Parker
Steven Parker
229,644 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
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
229,644 Points
Steven Parker
Steven Parker
229,644 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
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
229,644 Points
Steven Parker
Steven Parker
229,644 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.