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.
Abraham Coronado
1,467 PointsA 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
Christopher Aporta
24,258 PointsAbraham,
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
15,622 PointsSince 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.
Lee Zamastil
21,627 PointsThanks 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
7,117 Pointsthanks Christopher and Casey! really helpful comments cuz I was messed totally while I knew what pixel is.
Rico Suhanta
831 Pointsso the points its better for us to use relative units such as percentage? because it can dynamically adjust its parent elements?