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

I disagree with the currently accepted answer. As uber5001 suggests, a px is a fixed unit, and in a similar spirit to the efforts of the Android-specifc dp.

Per Material's spec:

When writing CSS, use px wherever dp or sp is stated. Dp only needs to be used in developing for Android.

Additionally

When designing for the web, replace dp with px (for pixel).

Answer 2

Use rem.

It is the font size of the root element and a very good base unit for the size of other UI elements.

If one used the same absolute size (in centimeter), the text and other elements would be much too big on mobile or much too small on desktop.

If one used the same amount of pixels, the text and other elements would be much too small on mobile or much too big on desktop.

The rem unit is on spot because it says "Hey, this is how big normal text should be." Basing the size of other UI elements on this is a pretty reasonable choice.

Answer 3

Why not use points, it is a consistent size across devices. And is relative to the screen size. Most are not familiar with it since it comes from traditional publishing.

Answer 4

What about use some mix between vw ( screen's width for any device) and em? Here font-size is changing dynamically, depending your device screen width. Use in your main CSS file next rule:

font-size: calc(100vw * 10 / 375);

(width for iPhone 6/7/8 is 375px, change it to 320px (iPhone5) and etc)

In all cases it is going work perfect. There is only one minus. If your goal is "pixel perfect", then you need to use big numbers after dot.

Example: your goal is font-size h5: 18px on all screens.

Then your perfect "em" will be:

h5 { 
 font-size: 1.79904em;
 }

without perfection use 18 / 10:

h5 { 
 font-size: 1.8em;
 }

According to Google Chrome you get 18.0096px;

Answer 5

What about a interface based on rem units?

I'm not experienced enough on the matter to confirm, but I think you could make some math based on the viewport size to apply a font-size in the root element and the entire interface would adjust accordingly. This stuff is a bit of witchcraft to me yet.

Answer 6

http://www.w3.org/TR/css3-values/#lengths

The closest unit available in CSS are the viewport-percentage units.

• vw - Equal to 1% of the width of the initial containing block.
• vh - Equal to 1% of the height of the initial containing block.
• vmin - Equal to the smaller of vw or vh.
• vmax - Equal to the larger of vw or vh.

The only mobile browser to be aware of that doesn't support these units is Opera. http://caniuse.com/#feat=viewport-units