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 Pixel Units

Victor Gordian
Victor Gordian
4,656 Points
Posted by Victor Gordian
Victor Gordian
4,656 Points

About pixels

I tend to dumb down things for myself because I don't usually understand what Im hearing so i either ask questions which might sound dumb, He said that in higher resolution devices the px's go from 200 to 400, why? How would know if people are using high res device, can't you just do something like "max-pix" or something like that? sorry if this sounds dumb, I just dont understand px that well..and i read the sites he put.

Thania Abrahams
Thania Abrahams
972 Points

Were you able to understand this? Because I still need help. I do not understand, if I want the width of an element to be 200px, how can that be an abstract value? Does that declaration mean nothing? What does it than mean? Or am I just using it to see how an element looks on MY screen and than it will look the same on other screens depending on the resolution?

2 Answers

Merritt Lawrenson
Merritt Lawrenson
13,477 Points
Merritt Lawrenson
Merritt Lawrenson
13,477 Points

It used to be simple - pixel dimensions were pixel dimensions. But not we have phones, macs with retina screens, hi-dpi windows screens, and others that are higher resolutions. Browsers on hi-dpi screens use twice as many pixels to make everything sharper looking - otherwise webpages would be so small on your screen it'd be hard to read. On a 5-inch 1080p phone, 200 pixels is only about a third to a half an inch, while on a normal computer screen that same 200 pixels is two to three inches. Hi-dpi screens when they get a webpage multiply all the measurements so that things stay the size on the screen you expect them to.

If you want to see this in action, open any webpage you want and then open the Chrome development tools. If you click the little icon in the upper-left shaped like a phone, Chrome enters an interface for testing mobile screens and you can see that, for instance, the Nexus 4 doubles pixel measurements, but the higher-resolution Nexus 5 triples them.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

I'm afraid its not as easy as that. A pixel, one pixel is a finite size so an image set to a certain width and height is the same physical size. However some screens display pixels in a higher pixel density than others. The higher the pixel density (or screen resolution) the more pixels take up that space and the smaller the image will appear.

So an image that is optimised for a retina screen won't look as clear on a desktop screen.

There are ways you can check for pixel resolution of an image using CSS media queries but this a different post in itself. Google for device media queries to learn more about it. :)