css - tamaño - ¿qué es exactamente la proporción de píxeles del dispositivo?
duplicar pixeles en photoshop (4)
esto se menciona en cada artículo sobre web móvil, pero en ninguna parte puedo encontrar una explicación de qué exactamente mide este atributo.
¿Alguien puede explicar qué hace consultas como esta verificación?
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
//high resolution images go here
}
Respuesta corta
La proporción de píxeles del dispositivo es la relación entre los píxeles físicos y los píxeles lógicos. Por ejemplo, el iPhone 4 y el iPhone 4S informan una relación de píxeles del dispositivo de 2, porque la resolución lineal física es el doble de la resolución lineal lógica.
- Resolución física: 960 x 640
- Resolución lógica: 480 x 320
La fórmula es:
Dónde:
es la resolución lineal física
y:
es la resolución lineal lógica
Otros dispositivos informan distintas proporciones de píxeles de dispositivo, incluidas las que no son enteras. Por ejemplo, el Nokia Lumia 1020 informa 1.6667, el Samsumg Galaxy S4 informa 3 y el Apple iPhone 6 Plus informa 2.46 (fuente: dpilove ) . Pero esto no cambia nada en principio, ya que nunca debes diseñar para un dispositivo específico.
Discusión
El "píxel" de CSS ni siquiera se define como "un elemento de imagen en alguna pantalla", sino más bien como una medición angular no lineal de ángulo de visión, que es aproximadamente de una pulgada al alcance de un brazo. Fuente: CSS Absolute Lengths
Esto tiene muchas implicaciones cuando se trata de diseño web, como la preparación de recursos de imágenes de alta definición y la aplicación cuidadosa de diferentes imágenes a diferentes proporciones de píxeles de dispositivos. No querría obligar a un dispositivo de gama baja a descargar una imagen de muy alta resolución, solo para reducirla a nivel local. Tampoco quieres que los dispositivos de gama alta realicen imágenes de baja resolución para una experiencia de usuario borrosa.
Si está atascado con imágenes de mapa de bits, para acomodarse a muchas proporciones de píxeles de dispositivo diferentes, debe usar las Consultas de medios CSS para proporcionar diferentes conjuntos de recursos para diferentes grupos de dispositivos. Combine esto con trucos agradables como background-size: cover o establezca explícitamente el background-size en valores porcentuales.
Ejemplo
#element { background-image: url(''lores.png''); }
@media only screen and (min-device-pixel-ratio: 2) {
#element { background-image: url(''hires.png''); }
}
@media only screen and (min-device-pixel-ratio: 3) {
#element { background-image: url(''superhires.png''); }
}
De esta forma, cada tipo de dispositivo solo carga el recurso de imagen correcto. También tenga en cuenta que la unidad px en CSS siempre opera en píxeles lógicos .
Un caso para gráficos vectoriales
A medida que aparecen más y más tipos de dispositivos, se vuelve más complicado proporcionarles a todos ellos los recursos de mapa de bits adecuados. En CSS, las consultas de medios son actualmente la única forma, y en HTML5, el elemento de imagen le permite usar diferentes fuentes para diferentes consultas de medios, pero la compatibilidad todavía no es del 100% ya que la mayoría de los desarrolladores web todavía tienen que soportar IE11 por un tiempo más ( fuente: caniuse ) .
Si necesita imágenes nítidas para iconos, líneas de arte, elementos de diseño que no sean fotos , debe comenzar a pensar en SVG, que se adapta maravillosamente a todas las resoluciones.
Proporción de píxel del dispositivo == Proporción de píxeles CSS
En el mundo del desarrollo web, la relación de píxeles del dispositivo (también llamada relación de píxeles CSS) es lo que determina cómo el CSS interpreta la resolución de pantalla de un dispositivo.
El CSS de un navegador calcula la resolución lógica (o interpretada) de un dispositivo mediante la fórmula:
Por ejemplo:
Apple iPhone 6s
- Resolución real: 750 x 1334
- Relación de píxeles CSS: 2
- Resolución Lógica:
Al visualizar una página web, el CSS pensará que el dispositivo tiene una pantalla de resolución de 375x667 y las consultas de medios responderán como si la pantalla fuera de 375x667 . Pero los elementos renderizados en la pantalla serán el doble de agudos que una pantalla real de 375x667 porque hay el doble de píxeles físicos en la pantalla física.
Algunos otros ejemplos:
Samsung Galaxy S4
- Resolución real: 1080 x 1920
- Relación de píxeles CSS: 3
- Resolución Lógica:
iphone 5s
- Resolución real: 640 x 1136
- Relación de píxeles CSS: 2
- Resolución Lógica:
¿Por qué existe la relación de píxeles del dispositivo?
La razón por la cual se creó la proporción de píxeles CSS es porque a medida que las pantallas de los teléfonos obtienen resoluciones más altas, si cada dispositivo todavía tuviera una proporción de píxeles CSS de 1, las páginas web se verían demasiado pequeñas para verse.
Un monitor de escritorio de pantalla completa es de aproximadamente 24 "a una resolución de 1920x1080. Imagínese si el monitor se redujo a aproximadamente 5" pero tenía la misma resolución. Ver cosas en la pantalla sería imposible porque serían muy pequeñas. Pero los fabricantes están saliendo con pantallas de teléfono de resolución de 1920x1080 consistentemente ahora.
Por lo tanto, la proporción de píxeles del dispositivo fue inventada por los fabricantes de teléfonos para que pudieran seguir impulsando la resolución, la nitidez y la calidad de las pantallas del teléfono, sin hacer que los elementos en la pantalla sean demasiado pequeños para ver o leer.
Aquí hay una herramienta que también le dice la densidad de píxeles de su dispositivo actual:
El artículo de Boris Smus Imágenes High DPI para Densidades de píxeles variables tiene una definición más precisa de la proporción de píxeles del dispositivo: el número de píxeles del dispositivo por píxel CSS es una buena aproximación, pero no la historia completa.
Tenga en cuenta que puede obtener el DPR utilizado por un dispositivo con window.devicePixelRatio .
https://developer.mozilla.org/en/CSS/Media_queries#-moz-device-pixel-ratio
-moz-device-pixel-ratio
Da la cantidad de píxeles del dispositivo por píxel CSS.
esto es casi autoexplicativo. el número describe la proporción de la cantidad de píxeles "reales" (pixerls físicos de la pantalla) que se utilizan para mostrar un píxel "virtual" (tamaño establecido en CSS).