How to convert between Android DP and CSS px?

by

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

corresponding CSS:

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.

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.

Attribution
Source : Link , Question Author : Pinyin , Answer Author : treblam

Leave a Comment