What's Dp (Density Independent Pixels) Units with CSS

Density Bucket	Screen Density	Physical Size	Pixel Size
ldpi	120 dpi	0.5 x 0.5 in	0.5 in * 120 dpi = 60x60 px
mdpi	160 dpi	0.5 x 0.5 in	0.5 in * 160 dpi = 80x80 px
hdpi	240 dpi	0.5 x 0.5 in	0.5 in * 240 dpi = 120x120 px
xhdpi	320 dpi	0.5 x 0.5 in	0.5 in * 320 dpi = 160x160 px
xxhdpi	480 dpi	0.5 x 0.5 in	0.5 in * 480 dpi = 240x240 px
xxxhdpi	640 dpi	0.5 x 0.5 in	0.5 in * 640 dpi = 320x320 px

Relation between dp - sp and PX

I recommend reading Google's definitions of dp and sp, which can be found in the Android docs, here and here.

There's also some helpful information in the wonderful Designer's Guide to DPI.

Is dp (Density-independent Pixels) a Physical Size?

Good Question!.

When they say physical size, they mean the physical number of pixels.

Since a high resolution screen has more pixels per inch then a low resolution screen. The physical number of pixels per dp will be less on the lower resolution screen.

That being said, most phone screens do not fit in perfectly into any bucket. What happens then is that android fits them into the closest bucket which can cause the number of pixel per dp to stray from the bucket amount.

CSS - Units of measurement and screen resolution: what's reference pixel, anyway?

The reference pixel is an attempt to standardize what "pixel" means in web development. The reason that this matters is because the physical measurement of a pixel can vary greatly depending on the pixel depth of the display.

For example, old CRT monitors had 72 pixels per inch, whereas an iPhone 7+ has 401 pixels per inch. So a literal measurement of 100px would be 1.39 inches on the CRT monitor and 0.25 inches on the iPhone.

This article also has a pretty good explanation that helped me understand it better.

A List Apart, "A Pixel Identity Crisis" by Scott Kellum. January 17, 2012

"The w3c currently defines the reference pixel as the standard for all
pixel-based measurements. Now, instead of every pixel-based
measurement being based on a hardware pixel it is based on an optical
reference unit that might be twice the size of a hardware pixel. This
new pixel should look exactly the same in all viewing situations..."

"When using a phone that you held close, a reference pixel will be
smaller on the screen than a projection you view from a distance. If
the viewer holds their phone up so it is side-by-side with the
projection, the pixel sizes should look identical no matter the
resolution or pixel density the devices have. When implemented
properly, this new standard will provide unprecedented stability
across all designs on all platforms no matter the pixel density or
viewing distance."

What is an Android device independent pixel and how does it differ from a regular css pixel?

As a developer all the information you are reading is important to you. I stumbled upon the same concepts when I was designing my first responsive design and thought latest iphone is a full hd mobile having resolution width about 1980 or may be 1080 pixels and I am using max-width: 768px in my media query.

As you mentioned there is an official css pixel which is equal 1/96 inches or in other words 1 inch of any media device has 96 css pixels. When you write media query you are referring to these css pixels. So if the iPhone has width around 3-4 inches then it is 300 to 400 css pixel wide. Now you might think that since only css pixels matter for web design you shouldn't care about dp ,dpi, ppi or dip like stuff. But you must know them too because you'll need them when designing for ratina displays.

The css pixels are also called logical pixels. The other kind of pixels are physical pixels. Actually a pixel by definition is the smallest colourable section of a screen. This smallest colourable section is called physical pixel. When we set border: 1px solid red, this would fill 1 logical pixel(1/96 inches) width on screen with red color. Now this logical pixel might have many physical pixels in it. If a screen provides 4 physical pixels in one logical pixel then we can distinguish 0.25 solid red from 0.5 solid red -- that is the screen can provide finer visual details.

Now why would you need to care about physical pixels? Nowadays screens have very high resolutions, that is more physical pixels in one logical pixels. E.g. mac book has around 2560-by-1600 resolution in around 13 inches screen where as a normal pc with 96dpi has 1367 by 768 physical pixels in 19 inches. Now if you render an image of width 1367 css pixels and height 768 css pixel on my normal 19 inches pc as <img src="bla.jpg" width="680" height="380"> then the image would be shrunk to half of its actual size. Every pair of pixels will be merged to one on my screen, that is I have lost a detail of 1px for every other 1px in the image. On the other hand if I render an image having width 680 css pixels and height 380 css px then both these image would appear exactly same. The fact is my screen provides only 1/96 inch wide minute detail only. On the other hand if I had mac book then the 1367 css px wide image would appear more crisper to me because mac book will scrunch the image to half but will not merge 2pixels into one and because it can provide detail of 0.5 logical pixel too that is it can show two different colors in 1/96 inches. Ok fine, but how can I use this fact for web designing? What we can do is provide higher resolution images to ratina display and lesser resolution images to normal displays. To do this we use the following:

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

device-pixel-ratio is number of physical pixels available in one logical pixel on the display. dpi means the same thing. Actually dpi means physical pixels in one inch of display.

---

Related Topics