css - para - pantallas responsive
¿Cómo funcionan los puntos de interrupción en dispositivos modernos de alta resolución? (1)
Los teléfonos y tabletas modernos tienen resoluciones muy altas.
Mi Galaxy S7 Edge, por ejemplo, tiene una resolución de 1440 x 2560 píxeles.
Los puntos de corte comunes para dispositivos móviles parecen ser de alrededor de 768 píxeles, como en bootstrap .
Ejemplo de bootstrap.css :
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
¿Cómo es que mi teléfono muestra la versión "receptiva" de sitios web a pesar de que su resolución es posiblemente más grande que la mayoría de los monitores de escritorio? Por el ejemplo, parecería que mi teléfono siempre mostraría el sitio en modo "escritorio".
Del artículo Un píxel no es un píxel no es un píxel ...
Sin embargo, sé lo que les interesa a los desarrolladores web. Necesitan píxeles CSS. Es decir, los "píxeles" que se utilizan en las declaraciones de CSS, tales como
width: 300pxofont-size: 14px.Estos píxeles no tienen nada que ver con la densidad real de píxeles del dispositivo. Básicamente son una construcción abstracta creada específicamente para nosotros, los desarrolladores web.
Es más fácil de explicar cuando consideramos el zoom. Si el usuario amplía, un elemento con
width: 300pxocupa más y más de la pantalla, y por lo tanto se vuelve más ancho y más ancho cuando se mide en píxeles del dispositivo (físico). Sin embargo, en los píxeles de CSS, el ancho permanece en 300 píxeles, y el efecto de ampliación se crea al expandir los píxeles de CSS tanto como sea necesario.
Ver también: