¿Qué son las unidades dp (píxeles independientes de la densidad) con CSS?

Para Android, la gente recomienda usar medidas de dp (píxeles independientes de la densidad) para los elementos de la interfaz de usuario, y existen convenciones como usar 48dppara la altura de un botón, etc.

Estoy trabajando en una aplicación web y recibo muchas críticas sobre el diseño de la interfaz de usuario que dicen que no se ajusta a los estándares de diseño de Android. Obviamente, mi aplicación se verá diferente ya que usa CSS y HTML en lugar del tema Holo de Android, pero aún así me gustaría que se ajustara lo más posible. Sin embargo, CSS no permite mediciones independientes de la densidad.

Cuando pruebo mi aplicación en diferentes resoluciones y densidades de píxeles, no se ve bien y, a veces, está fuera de proporción, por lo que ni siquiera es funcional. CSS no tiene unidades dp como el desarrollo nativo de Android, pero me preguntaba cuáles son algunas alternativas.

¿Puedo de alguna manera obtener la densidad de píxeles usando Javascript y escalar todo manualmente de manera apropiada? ¿Cuál es la mejor manera de crear una aplicación web que se vea y funcione bien en todas las resoluciones / densidades?

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

La unidad más cercana disponible en CSS son las unidades de porcentaje de la ventana gráfica.

• vw: igual al 1% del ancho del bloque contenedor inicial.
• vh: igual al 1% de la altura del bloque contenedor inicial.
• vmin: igual al menor de vw o vh.
• vmax: igual al mayor de vw o vh.

El único navegador móvil que debe tener en cuenta que no es compatible con estas unidades es Opera. http://caniuse.com/#feat=viewport-units

No estoy de acuerdo con la respuesta actualmente aceptada. Como sugiere uber5001, a pxes una unidad fija, y con un espíritu similar a los esfuerzos de Android-specifc dp.

Por especificación del material :

Al escribir CSS, use px siempre que se indique dp o sp. Dp solo necesita usarse para desarrollar para Android.

Adicionalmente

Cuando diseñe para la web, reemplace dp por px (para píxel).

Utilice rem.

Es el tamaño de fuente del elemento raíz y una unidad base muy buena para el tamaño de otros elementos de la interfaz de usuario.

Si se usara el mismo tamaño absoluto (en centímetros), el texto y otros elementos serían demasiado grandes en dispositivos móviles o demasiado pequeños en computadoras de escritorio.

Si se usara la misma cantidad de píxeles, el texto y otros elementos serían demasiado pequeños en el móvil o demasiado grandes en el escritorio.

La remunidad está en el lugar porque dice "Oye, así de grande debe ser el texto normal". Basar el tamaño de otros elementos de la interfaz de usuario en esto es una opción bastante razonable.

En CSS3 puede ser más exacto decir que la web no tiene Android px. La especificación de CSS3px dice esto:

píxeles; 1 px es igual a 1/96 de 1 pulgada

px podría ser la medida que desea, en el futuro.

A partir de CSS3, no hay unidades CSS que sean realmente independientes del dispositivo. Consulte la especificación W3C sobre longitudes absolutas . En particular, las unidades absolutas pueden no coincidir con sus medidas físicas.

Si las unidades físicas fueran fieles a su propósito, podría usar algo como puntos; los puntos están lo suficientemente cerca de dps:

1 in = 72 pt
1 in = 160 dp

1 dp = 72 / 160 pt

Si usa SCSS, puede escribir una función para devolver en pts:

@function dp($_dp) {
  @return (72 / 160) * $_dp + pt;
}

Y úsalo:

.shadow-2 {
  height: dp(2);
}

¿Qué pasa con una interfaz basada en unidades rem?

No tengo suficiente experiencia en el tema para confirmarlo, pero creo que podría hacer algunos cálculos matemáticos basados ​​en el tamaño de la ventana gráfica para aplicar un tamaño de fuente en el elemento raíz y toda la interfaz se ajustaría en consecuencia. Esto es un poco de brujería para mí todavía.

¿Por qué no usar puntos? Tiene un tamaño uniforme en todos los dispositivos. Y es relativo al tamaño de la pantalla. La mayoría no está familiarizada con él, ya que proviene de publicaciones tradicionales.

¿Qué tal si usamos una mezcla entre vw (ancho de pantalla para cualquier dispositivo) y em? Aquí el tamaño de fuente cambia dinámicamente, dependiendo del ancho de la pantalla de su dispositivo. Use en su archivo CSS principal la siguiente regla:

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

(el ancho para iPhone 6/7/8 es 375px, cámbielo a 320px (iPhone5) y etc.)

En todos los casos va a funcionar perfecto. Solo hay uno menos. Si su objetivo es "píxeles perfectos", entonces necesita usar números grandes después del punto.

Ejemplo: su objetivo es el tamaño de fuente h5: 18px en todas las pantallas.

Entonces tu "em" perfecto será:

h5 { 
 font-size: 1.79904em;
 }

sin la perfección uso 18/10:

h5 { 
 font-size: 1.8em;
 }

Según Google Chrome obtienes 18.0096px;