How to convert between Android DP and CSS px?
How to convert between Android DP and CSS px?
Question
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 px
as 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.
Accepted Answer
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.