android - una - transformar dp a px
¿Qué son las unidades dp(píxeles independientes de la densidad) con CSS? (7)
Para Android, la gente recomienda usar mediciones dp (píxeles independientes de la densidad) para los elementos de la interfaz de usuario, y existen convenciones que existen, como usar 48dp para una altura de botón, etc.
Estoy trabajando en una aplicación web, y estoy recibiendo muchas críticas sobre el diseño de la interfaz de usuario que dice 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 Android Holo, pero me gustaría que sea lo más compatible posible. Sin embargo, CSS no permite mediciones independientes de 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.
¿De alguna manera puedo obtener la densidad de píxeles usando Javascript y escalar manualmente todo apropiadamente? ¿Cuál es la mejor manera de hacer que una aplicación web se vea y funcione bien en todas las resoluciones / densidades?
¿Qué tal una interfaz basada en unidades rem?
No tengo experiencia suficiente en el asunto para confirmarlo, pero creo que podría hacer algunos cálculos basados en el tamaño de la ventana gráfica para aplicar un tamaño de letra en el elemento raíz y la interfaz completa se ajustaría en consecuencia. Esto es un poco de brujería para mí todavía.
A partir de CSS3, no hay unidades CSS que sean realmente independientes del dispositivo. Ver la especificación W3C en longitudes absolutas . En particular, las unidades absolutas pueden no coincidir con sus mediciones físicas.
Si las unidades físicas fueran fieles a su propósito, podrías 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 regresar en pts:
@function dp($_dp) {
@return (72 / 160) * $_dp + pt;
}
Y úsala:
.shadow-2 {
height: dp(2);
}
En CSS3 puede ser más exacto decir que la web no tiene el px de Android. La especificación para px3 de CSS3 dice esto:
pixeles; 1px es igual a 1/96 de 1 pulgada
px podría ser la medida que desee, en el futuro.
No estoy de acuerdo con la respuesta actualmente aceptada. Como sugiere uber5001, un px es una unidad fija, y en un espíritu similar a los esfuerzos del dp específico de Android.
Por la especificación de Material :
Al escribir CSS, use px donde se indique dp o sp. Dp solo necesita ser usado en desarrollo para Android.
Por qué no usar puntos, es un tamaño constante en todos los dispositivos. Y es relativo al tamaño de la pantalla. La mayoría no está familiarizado con él, ya que proviene de la publicación tradicional.
http://www.w3.org/TR/css3-values/#lengths
La unidad más cercana disponible en CSS son las unidades de porcentaje de ventana.
- 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 más grande 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
Use 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 uno usa el mismo tamaño absoluto (en centímetros), el texto y otros elementos serían demasiado grandes en el dispositivo móvil o demasiado pequeños en el escritorio.
Si se utiliza 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 unidad rem 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.