CSS Media Queries

Question

Estoy tratando de adaptar la aplicación web de mi tableta para usarla en teléfonos celulares. La funcionalidad de Media Query parece perfecta y mi prueba inicial confirma esto. La pregunta que tengo es: con teléfonos y tabletas que cambian su orientación de vertical a horizontal (al girar el dispositivo) ¿a qué se refiere el ancho máximo?

En otras palabras, los teléfonos Android más grandes tienen resoluciones en la línea de 480x800, el iPhone4 tiene una resolución de 640x960, y el original Blackberry Torch tiene una resolución de 360x480. Estas son todas las resoluciones (W x H) cuando los dispositivos se mantienen en modo vertical, por lo que los anchos son 400, 640 y 360 respectivamente. Sin embargo, cuando gira el dispositivo hacia el paisaje, la altura "se convierte" en el ancho para fines de visualización. Entonces, los anchos efectivos en el paisaje se convierten en 800, 960 y 480, respectivamente, y los anchos de 800 y 960 se solapan con los anchos de paisaje de la tableta, lo que daña la pantalla.

Entonces, ¿ancho es siempre ancho? Es decir, cuando el dispositivo informa sus dimensiones, ¿el valor de ancho permanece siempre igual para CSS, o cambia el valor del ancho cuando el dispositivo gira a horizontal?

Gracias a todos ustedes por adelantado.

Answer 1

El valor del ancho cambiará cuando el dispositivo se voltee, porque el ancho de la página que se está viendo también está cambiando.

Si desea consultar si el dispositivo se está utilizando en modo horizontal o vertical, puede utilizar la propiedad de orientación en su lugar:

@media screen and (orientation: portrait) { 
} 

Esto comprobará si el ancho de la ventana del navegador es mayor que la altura (orientación: paisaje hará lo opuesto). Para obtener los mejores resultados, probablemente necesite usar una combinación de muchas propiedades de MQ usando el operador 'y' para las pruebas de cadena. es decir .:

@media screen and (orientation: landscape) and (max-width: 960px) { 
} 

una lista completa de propiedades MQ está disponible here.

Answer 2

El valor de css cambia en función de su paisaje o no en un teléfono móvil, ya que el ancho y la altura de la pantalla cambian en el teléfono móvil cuando se gira el teléfono o la tableta. por lo que debe ser específico al definir el estilo CSS para orientar lo que desea.

@media (min-width: 700px) y (orientación: paisaje) {

}

para el detalle comprensión de consultas de medios visite: http://letsdopractice.com/css-media-queries/

Answer 3

Las consultas de medios se utilizan para definir estilo para diferentes tamaños de pantalla. Voy a contarte sobre conceptos básicos sobre consultas en los medios. La sintaxis de medios CSS consulta es:

@media not|only mediatype and (media feature) { 
CSS-Code; 
} 

Para una detallada acerca de la sintaxis de consulta de medios toturial visite This Site