What's dp (density independent pixels) units with CSS?

Question

For Android, people recommend using dp (density independent pixels) measurements for UI elements, and there are conventions that exist such as using 48dp for a

Answer 1

In CSS3 it may be more accurate to say that the web doesn't have Android's px. The spec for CSS3's px says this:

pixels; 1px is equal to 1/96th of 1in

px might be the measurement you want, in the future.

Answer 2

As of CSS3, there are no CSS units that are truly device-independent. See the W3C spec on absolute lengths. In particular, the absolute units might not match their physical measurements.

If physical units were true to their purpose, you could use something like points; points are close enough to dps:

1 in = 72 pt
1 in = 160 dp

1 dp = 72 / 160 pt

If you use SCSS, you can write a function to return in pts:

@function dp($_dp) {
  @return (72 / 160) * $_dp + pt;
}

And use it:

.shadow-2 {
  height: dp(2);
}