Abraham Coronado1,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?
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,
Casey Ydenberg15,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.
Samvel Tadevosyan7,117 Points
thanks Christopher and Casey! really helpful comments cuz I was messed totally while I knew what pixel is.
Rico Suhanta831 Points
so the points its better for us to use relative units such as percentage? because it can dynamically adjust its parent elements?