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
Benjamin Hedgepeth
5,672 PointsTotal loss of understanding regarding the px unit
I've been attempting to read information on this measurement. I am so lost that I can't convey what I read except for that css pixel measurements are static regardless of device pixel densities. Please help and explain in layman's terms.
1 Answer
Damien Watson
27,419 Points'px' is an exact measurement, it refers to the pixels on your screen (whether mobile or pc) .
This means that 10px is 10 pixels, what ever screen you're viewing on. I might be wrong about pixel densities but I believe on Android devices the size of the pixel depends on which device you are using, so while 10px on one device might be say 5mm in physical distance, it might be 2mm on a higher resolution device.
Web
With web pages, it is best practice to use a measurement that scales like '%' or 'em'. People with sight impediments will tend to scale the text to read better. 'px' is a non scaling measurement as '1 pixel' at twice the size is still '1 pixel'.
If you're wondering how to make graphics for Android, this is something I did a while ago but I think I remember the basics:
Pixel Density
Different screens in Android use different densities of pixels, and they measure in how many pixels(dots) per inch (dpi). The current standard measurements are: ldpi(120), mdpi(160), hdpi(240), xhdpi(320), xxhdpi(480), xxxhdpi(640)
This looks a bit confusing but you can look at it this way. Most people recommend to create graphics for Medium (mdpi) with vector elements and then scale accordingly for the rest. In this case 'mdpi' ratio is '1' the others are defined from here and will look like: ldpi(0.75), mdpi(1), hdpi(1.5), xhdpi(2), xxhdpi(3), xxxhdpi(4)
If you create an 80px square graphic for mdpi, then for xxhdpi (3x) it will be 240px square.
I hope this helps a bit. :)