Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Basics (2014) Understanding Values and Units Pixel Units

Abraham Coronado
Abraham Coronado
1,467 Points

A little bit confused by pixels behavior.

Under the video the description says "when we use pixels, the size we define will always remain the same and will not scale, regardless of the browser window and size of the screen"

Then he goes on to show on the video how a 200px X 200px square will look like a 400px X 400px square on a device with twice the pixel density, so isn't technically scaling to the other device's size?

4 Answers

Abraham,

In this instance, try not to think of 'scaling' in terms of density, but rather in terms of screen size. For instance, a 200px x 200px object is going to take up a lot more 'space' on your tablet screen than on your laptop screen. This is because we are not sizing the given object in relation to the size of its parent element or the device's screen (which is something we can do with relative units), we are sizing it absolutely.

Instead of giving our object an absolute value, we could, for instance, give it width and height values of 50%, which size it to half the size of it's parent element. This relative value has the ability to change dynamically across different devices and browser window sizes, and in turn becomes very important in the context of responsive design.

Does this help/make sense?

Best of luck,

Chris

Casey Ydenberg
Casey Ydenberg
15,622 Points

Since Apple introduced retina screens, CSS pixels are not the same as real pixels. Whether it "scales" or not is a matter of semantics, but the important thing to understand is that CSS pixels are absolute units, while percentages (and vw) are relative units. On a retina screen (double the pixel density) one CSS pixel simply represents two real pixels.

Thanks for this. The concept of a CSS pixel representing two real pixels on a retina screen is key. Though it's not mentioned in the video, keeping this in mind is very helpful.

Samvel Tadevosyan
Samvel Tadevosyan
7,117 Points

thanks Christopher and Casey! really helpful comments cuz I was messed totally while I knew what pixel is.

Rico Suhanta
Rico Suhanta
831 Points

so the points its better for us to use relative units such as percentage? because it can dynamically adjust its parent elements?