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
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,628 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?