Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
I think what you need is media queries based on device resolution i.e. and then depending on the DPI of the device, you should scale your original pixel values by the ratio for each resolution. You could also opt for using em/rems everywhere and then just scale the base font size for each resolution. – Dom Jul 27 '14 at 15:24
up vote 7 down vote accepted

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.

share|improve this answer

I believe the full answer to your question can be found here:

To convert dp to px you need to take account of the display dimensions you are addressing to. The greater the DPI, the more pixels you'll have to cram in the same area to make it look good and to avoid pixelation:

ldpi: 1 dp = 0.75 px
mdpi: 1 dp = 1 px
hdpi: 1 dp = 1.5 px
xhdpi: 1 dp = 2 px
xxhdpi: 1 dp = 3 px
xxxhdpi: 1 dp = 4 px


A 3x3 dp square in CSS or Photoshop needs to be:

2.25x2.25 px - ldpi
3x3 px - mdpi (Samsung ACE, Xperia X8)
6x6 px - xhdpi (Xperia S, Google Nexus 4)
9x9 px - xxhdpi (Samsung S4 - S5, HTC One)
12x12 px - xxxhdpi (this resolutin will be used on next generation devices)

Based on the above, your calculatins should look like this, using a 3x dp multiplier for XXHDPI screens:

min-height: 144px;
min-width: 864px;
border-radius: 6px;

Android automatically scales down images if it finds that the used device resolution is lower, so you are safe to develop with XXHDPI in mind, as it addresses the majority of today's high-end devices on the market.

Here is a simple converter to do the job for you:

share|improve this answer
But isn't a px in android different from a px in css? – Pinyin Jul 29 '14 at 4:13
A pixel means the same thing no matter the software or screen used. It may look like a larger or smaller dot on different devices, but that's because those screens may have more or less pixels crammed in the same space (this term is called PPI - pixel per inch). I recommend reading Mr E. Upvoter answer, it will help you predefine densities in CSS and make your job easier. – Mathieu Jul 29 '14 at 9:02
Thanks, I'll try the media queries. – Pinyin Jul 29 '14 at 9:37
px is not pixels. It is an angular measurement: This answer is wrong. – Jackson Mar 25 '15 at 18:49

W3C says:

The px unit thus shields you from having to know the resolution of the device. Whether the output is 96 dpi, 100 dpi, 220 dpi or 1800 dpi, a length expressed as a whole number of px always looks good and very similar across all devices (...)

And altough it says:

To get an idea of the appearance of a px, imagine a CRT computer monitor from the 1990s: the smallest dot it can display measures about 1/100th of an inch (0.25mm) or a little more. The px unit got its name from those screen pixels.

It also says:

In fact, CSS requires that 1px must be exactly 1/96th of an inch in all printed output (...)

Taking into account that by default screen devices are configured as 96dpi, it is the best assumption on how browsers interpret a CSS pixel:

96 css-px = ~ 1 inch

And we know that in Android:

160 dp = ~ 1 inch


96 css-px = ~ 160 dp
css-px-length = round(dp-length * 96 / 160)

And according to that:

min-height: 29px;
min-width: 173px;
border-radius: 2px; /* 2dp is 1.2px from the formula but it wont work */

Well, I thought that was right until I checked Google Polymer's Toast sizes:

  min-height: 48px;
  min-width: 288px;
  padding: 16px 24px 12px;
  box-sizing: border-box;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 2px;
  bottom: 12px;
  left: 12px;
  font-size: 14px;

So it is a 1 to 1 conversion, and from that we got that Android browsers use:

1 css-px = 1 dp

And 96 css-px per inch is used on other devices like desktops and laptops.

To conclude: css pixels are independent from device dpi and on Android devices 1 css-px is equal to 1dp.

share|improve this answer

This website explains Android's units the best! Hope it helps.

share|improve this answer

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

Hi digitalhomeboy, could you please explain a bit more what we'll find behind the link you provide and why it answers the question? That way, your answer is still of value in case the link breaks at a later time. Link rot is the main reason we really dislike link-only answers here. Thanks for your effort and keep contributing! – Vincent Nov 6 '14 at 13:31

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.