¿Cómo convertir entre Android DP y CSS px?

Veo que esta es probablemente una pregunta novata, pero realmente me confunde.

Estoy leyendo documentos de Google Material Design, junto con algunas de sus implementaciones en css. La especificación está escrita en Android dp, mientras que los códigos CSS se utilizan pxcomo una unidad de longitud.

Lo que me confunde es que las implementaciones de CSS a menudo usan el valor exacto de la especificación, por ejemplo, un brindis debería tener :

Altura de snackbar de una línea: 48 dp de altura

Ancho mínimo: 288 dp

2 dp esquina redondeada

CSS correspondiente :

min-height: 48px;
min-width: 288px;
...
border-radius: 2px;

En mi opinión actual, un Android DPgeneralmente se muestra con el tamaño de un píxel en una pantalla de 160 ppp, mientras que el CSS pxse define como un ángulo visual. Entonces, ¿ pxpasa a ser lo mismo que dpcuando se ve a cierta distancia? Si es así, ¿es ese un patrón común para usar pxcomo dpen CSS, o entendí mal el código CSS?

No sé nada sobre el desarrollo de Android antes, y tampoco un diseñador. Gracias por cualquier ayuda.

Creo que lo aceptado está mal. El css px es en realidad Pixel independiente del dispositivo (dip), y es un patrón común usar px como dp en css.

Creo que la respuesta completa a su pregunta se puede encontrar aquí:

/programming/2025282/difference-between-px-dp-dip-and-sp-in-android

Para convertir dp a px, debe tener en cuenta las dimensiones de visualización a las que se dirige. Cuanto mayor sea el DPI, más píxeles tendrá que agrupar en la misma área para que se vea bien y evitar la pixelación :

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

P.ej:

Un cuadrado de 3x3 dp en CSS o Photoshop debe ser:

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 (esta resolución se utilizará en dispositivos de próxima generación)

Según lo anterior, sus cálculos deberían verse así, utilizando un multiplicador de 3x dp para pantallas XXHDPI:

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

Android reduce automáticamente las imágenes si encuentra que la resolución del dispositivo utilizado es menor, por lo que es seguro desarrollar con XXHDPI en mente, ya que se dirige a la mayoría de los dispositivos de alta gama actuales en el mercado.

Aquí hay un convertidor simple para hacer el trabajo por usted: http://androidpixels.net/

W3C dice :

La unidad px lo protege de tener que conocer la resolución del dispositivo. Si la salida es de 96 ppp, 100 ppp, 220 ppp o 1800 ppp, una longitud expresada como un número entero de px siempre se ve bien y muy similar en todos los dispositivos (...)

Y aunque dice:

Para tener una idea de la apariencia de un px, imagine un monitor de computadora CRT de la década de 1990: el punto más pequeño que puede mostrar mide aproximadamente 1/100 de pulgada (0.25 mm) o un poco más. La unidad px obtuvo su nombre de esos píxeles de la pantalla.

También dice:

De hecho, CSS requiere que 1px debe ser exactamente 1/96 de pulgada en toda la salida impresa (...)

Teniendo en cuenta que, por defecto, los dispositivos de pantalla están configurados como 96 ppp, es la mejor suposición sobre cómo los navegadores interpretan un píxel CSS:

96 css-px = ~ 1 inch

Y sabemos que en Android:

160 dp = ~ 1 inch

Entonces:

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

Y de acuerdo a eso:

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

Bueno, pensé que era correcto hasta que revisé los tamaños de Toast de Google Polymer :

  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;

Entonces, es una conversión de 1 a 1, y de eso obtuvimos que los navegadores de Android usan:

1 css-px = 1 dp

Y 96 css-px por pulgada se usa en otros dispositivos como computadoras de escritorio y portátiles.

Para concluir: los píxeles css son independientes de los dpi del dispositivo y en los dispositivos Android 1 css-px es igual a 1dp.

No hay una respuesta correcta, en realidad hay dos:

1. Recomendado por Google (por ejemplo, en el curso de Udacity sobre diseño de materiales): utilice una conversión simple, que en muchos casos es 1: 1 como en la biblioteca Polymer. No es adecuado para la pantalla retina, por ejemplo, así que en lugar de 1: 1, use una relación de densidad provista en la tabla de dispositivos en la Guía oficial de diseño de materiales ( tabla con proporciones y métricas específicas para algunos dispositivos populares ) y proporcione consultas @media adecuadas para umbrales de resolución y activos, suponiendo que 1dp es igual a 1px para una pantalla mdpi (160dpi / ppi) .

Nota: idea general: en la parte inferior de la página: escala de imagen con alguna imagen para visualizar las proporciones para umbrales de resolución de pantalla múltiple (imagen de punto de interrupción)

2. si desea una consistencia ultra en su diseño para dispositivos específicos , debe investigar un poco más y calcular, y lo que es más importante, un montón de más consultas @media para admitir tantos dispositivos como desee y proporcionar respaldo (con el método mencionado en el 1er lugar) para los que no te importan tanto.

Aquí hay información más detallada para aquellos que quieran profundizar más en el tema, pero es una explicación y lógica detrás, lo anterior es una respuesta completa :

La cuestión es que la "densidad de píxeles", de acuerdo con la guía oficial de Material Design (Diseño> Unidades y medidas), es:

El número de píxeles que caben en una pulgada.

Entonces, básicamente, la densidad de píxeles es un nuevo nombre para un valor de ppi o dado que muchas personas no lo reconocen como algo separado, un valor de dpi.

Definición de 1dp según la misma guía:

Un dp es igual a un píxel físico en una pantalla con una densidad de 160 . Para calcular dp:

dp = (ancho en píxeles * 160) / densidad de pantalla

Al escribir CSS, use px donde se indique dp o sp. Dp solo necesita ser usado en el desarrollo para Android.

El núcleo principal del diseño de materiales es mantener dimensiones físicas consistentes en diferentes plataformas, lo que plantea el problema de la resolución de escritorio, ppi (/ dpi) y el píxel css, en cuyo caso debe seguir calculando el dp como en el caso de Android dispositivos, y no es cierto que la mayoría de las pantallas sean de 96 ppi (es una suposición que es importante para CSS), una gran parte de ellas tiene un ppi un poco más alto, y si se tiene en cuenta no solo el escritorio tradicional sino también las computadoras portátiles normales , o las tabletas, o los "convertibles" como Surface, existe la necesidad de la conversión: generalmente oscilan entre 100 y 130 ppp, lo que dice que la que estoy usando en este momento es 127 ppp:

100% = 160ppi -> físico 1 ancho de píxel = 1dp -> rectángulo 100x100px = 100x100dp

79% = 127ppi -> físico 1 ancho de píxel = ca. 0,8dp -> rectángulo 100x100px = 80x80dp

Aunque dp es una unidad pura y nueva solo para Android, debe hacer algunos cálculos para adaptar los diseños de MD que vienen en dp. Si desea tener una idea más clara de cuán grande será el elemento específico en el sentido físico, lo más útil para el propósito de la pregunta es el valor del rango de tamaño táctil ideal en las pautas de diseño de materiales para dispositivos específicos ** Debajo del valor dp hay uno físico ** El valor dp cambia, pero el físico permanece igual.

El problema, por qué necesita calcular unidades, se explica con más detalle en la guía de la API de Android (Convertir unidades dp en unidades de píxeles) y aún se aplica a los elementos diseñados con CSS:

En algunos casos, deberá expresar las dimensiones en dp y luego convertirlas> a píxeles.

Imagine una aplicación en la que se reconoce un gesto de desplazamiento o lanzamiento después de que el dedo del usuario se haya movido al menos 16 píxeles. En una pantalla de línea de base, el usuario debe moverse 16 píxeles / 160 ppp, lo que equivale a 1/10 de pulgada (o 2.5 mm) antes de que se reconozca el gesto. En un dispositivo con una pantalla de alta densidad (240 ppp), el usuario debe moverse 16 píxeles / 240 ppp, lo que equivale a 1/15 de pulgada (o 1,7 mm). La distancia es mucho más corta y, por lo tanto, la aplicación parece más sensible al usuario.

La conversión de polímero 1: 1 mencionada anteriormente probablemente se deba al hecho de que la densidad de 96 ppp, o incluso la que proporcioné, está en algún lugar de baja densidad o incluso (como en el caso de 96 ppp), incluso por debajo. Teniendo en cuenta que el valor dp no es un CSS aceptado, es más fácil suponer que la relación de densidad (0,75- para baja, 1,0 media, etc.) es la que debe usarse para la simplificación y el tamaño múltiple soporte de pantallas, que se muestra en la tabla de dispositivos para Diseño de materiales mencionado anteriormente. Incluso se menciona como una de las mejores prácticas en el capítulo citado anteriormente de la guía API de Android. Y ahí es donde la conversión de polímero 1: 1 podría ser buena, ya que muchos de los dispositivos tienen la relación de densidad en el nivel 1.

Volviendo al último dilema: el css px, si decides sumergirte en sutiles matices de diferentes dispositivos. Si no es tan inquietante, simplemente manténgase en la relación de densidad de la tabla de MD. Pero si eres un perfeccionista, este quid de la relación de píxeles CSS y dimensiones físicas tiene una explicación perfecta (y bastante simple) en una recomendación de candidato del W3C:

Las unidades de longitud absoluta se fijan entre sí y se anclan a alguna medida física. Son principalmente útiles cuando se conoce el entorno de salida. Las unidades absolutas consisten en las unidades físicas ('in', 'cm', 'mm', 'pt', 'pc', 'q') y la unidad de ángulo visual ('px') :

Para leer con el brazo extendido, 1px corresponde a aproximadamente 0.26 mm (1/96 pulgada).

Nota: Tenga en cuenta que esta definición de la unidad de píxeles y las unidades físicas difiere de las versiones anteriores de CSS. En particular, en versiones anteriores de CSS, la unidad de píxeles y las unidades físicas no estaban relacionadas por una relación fija: las unidades físicas siempre estaban vinculadas a sus medidas físicas, mientras que la unidad de píxeles variaba para coincidir más estrechamente con el píxel de referencia. (Este cambio se realizó porque demasiado contenido existente se basa en la suposición de 96 ppp, y romper esa suposición rompe el contenido).

Esta nueva definición de px (teniendo en cuenta las dimensiones físicas) llena el vacío entre los píxeles CSS y dps y nos permite asegurarnos de que mediante cálculos de medición simples, el llamado entorno de salida, que en este caso es consistente (en un sentido físico) ) Diseño MD , permanece igual en diferentes dispositivos y plataformas. Además, las Directrices W3C y MD utilizan las imágenes de dispositivos de baja y alta resolución para ilustrar la idea central de la cobertura de píxeles / puntos: se necesitan más píxeles de dispositivos (puntos) para cubrir un área de 1 px por 1 px en un dispositivo de alta resolución que en una de baja resolución, lo que significa que los ampliamente utilizados en las consultas CSS para la visualización de retina son de hecho lo mismo que debe proporcionar (pero con más umbrales) para Material Design y todos los dispositivos móviles.

Para concluir, use la relación de densidad de MD, que es la mejor práctica recomendada por Google , o si está obsesionado con la precisión o su diseño debe ser absolutamente consistente con los tamaños físicos: use la conversión precisa utilizando valores ppi / dpi de lo específico o común dispositivos (que es bastante loco), lo que puede probar fácilmente en la herramienta en línea de Google Resizer, ya que respetan los umbrales comunes sugeridos en la Guía de MD en primer lugar y las reglas de división para la relación y los nombres de tipo de visualización relevantes (xlarge, medium, etc.) ) implementado en él.

Así que quédese con las proporciones de MD de la tabla recordando que el dp de referencia igual al tamaño de píxel es para la resolución mdpi (160) y será bueno.