CSS CSS Basics Understanding Values and Units Pixel Units

Abraham Coronado
Abraham Coronado
1,467 Points
Posted by 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

Christopher Aporta
Christopher Aporta
24,257 Points

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,621 Points
Casey Ydenberg
Casey Ydenberg
15,621 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.

Lee Zamastil
Lee Zamastil
21,624 Points

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