How to convert between Android DP and CSS px?
I see this is probably a noob question, but it truly confuses me.
I'm reading documents from the Google Material Design, along with some of its implementations in css. The specification is written in Android's
dp, while css codes uses
px as a length unit.
What confuses me is that the css implementations often uses the exact value from specification, for example, a toast should have:
Single-line snackbar height: 48 dp tall
Minimum width: 288 dp
2 dp rounded corner
min-height: 48px; min-width: 288px; ... border-radius: 2px;
In my current understanding, an Android
DP is generally displayed at the size of one pixel on a 160dpi screen, while the CSS
px is defined as a visual angle. So does a
px happens to be the same as a
dp when seeing in some distance? If so, is that a common pattern to use
dp in css, or did I completely misunderstand the CSS code?
I know nothing about Android development before, and not a designer. Thanks for any help.
I think the accepted is wrong. The css px is actually Device Independent Pixel(dip), and it is a common pattern to use px as dp in css.