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


90

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?


2
CSS pxes el mismo que dpen Android. Según la especificación CSS3. en unidades y valores .
omninonsense

Respuestas:


24

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


¿Se muestran esas unidades correctamente cuando se implementan en iOS?
jmhostalet

@jmhostalet No, hace que el navegador entre en una especie de bucle infinito ya que la altura de la ventana gráfica es dinámica.
rookie1024

6
esta respuesta es incorrecta, porque la pxunidad en css es (contraintuitivamente) en realidad ya independiente de la densidad de píxeles - "un píxel css no es un píxel", hay muchos artículos sobre esto
ChaseMoskal

178

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).


25
Esta es la respuesta. +1 por citar la especificación del material.
Qix - MONICA FUE MALTRATADA

2
De MDN: "La unidad en no representa una pulgada física en la pantalla, pero representa 96 px. Eso significa que cualquiera que sea la densidad real de píxeles de la pantalla, se supone que es 96 ppp. En dispositivos con una mayor densidad de píxeles, 1 pulgada será menor que 1 pulgada física. Del mismo modo, mm, cm y pt no son longitudes absolutas ". developer.mozilla.org/en/docs/Web/CSS/…
Maciej Krawczyk

1
La pulgada CSS y la pulgada física son dos cosas diferentes. 1 pulgada CSS es siempre 96 px, independientemente de la densidad de la pantalla. Por lo tanto, solo en un monitor de 96 ppp la pulgada CSS y la pulgada física podrían considerarse iguales.
Maciej Krawczyk

1
@MaciejKrawczyk Entiendo la base de su afirmación sobre la disparidad de escala en px. Podría discutir sobre cómo un px es de hecho una unidad fija, y la escala que involucra no cambia esta verdad básica, pero eso es una pista falsa. La realidad es que la especificación de Material establece directamente el uso de px donde se sugiera dp. Dado que Brad preguntó sobre los estándares de diseño de Android, proporcioné la respuesta canónica y, por lo tanto, correcta.
Tohuw

2
La actualización reciente (mayo de 2018) del diseño de materiales explica la densidad de píxeles con más profundidad material.io/design/layout/#pixel-density
Squiggle

17

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.


16

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.


2
No puedo ver cómo sucederá esta transición sin romper todo. Y usar el mismo tamaño absoluto (en cm) para, digamos, texto en dispositivos móviles y computadoras de escritorio no es un buen paradigma.
Konstantin Schubert

Y 1 pulgada se define como 96 px. Las unidades CSS como in, mm dependen de la densidad de píxeles.
Maciej Krawczyk

yo siempre use px en vez de dp y va bien
Ivan Paredes


12

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);
}

10

¿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.


No es necesario establecer el tamaño de fuente. El tamaño de fuente predeterminado del elemento raíz suele ser una opción bastante razonable para el dispositivo en cuestión.
Konstantin Schubert

1

¿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.


0

¿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;

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.