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

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);
}