css - queries - media query min and max
Las consultas de medios no funcionan correctamente en el paisaje (2)
Tengo la siguiente consulta de medios:
@media screen and (max-width: 480px) {
Al ver el sitio web en modo retrato en mi Nexus 5, se ve de la manera que quiero. Sin embargo, cuando cambio el teléfono al modo horizontal, muestra el sitio completo y no lo especificado en esta consulta de medios.
¿Por qué está pasando esto? También lo intenté:
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
Esto no resolvió el problema.
En realidad, el ancho del paisaje Nexus 5 es 590px y has dado el ancho máximo: 480px ....
Ver los tamaños de puerto de vista
Puede dar consultas a los medios como este también:
@media screen and (min-width : 320px) and (max-width : 480px) and (orientation : portrait) {
.class-name {}
}
@media screen and (min-width : 320px) and (max-width : 480px) and (orientation :landscape) {
.class-name {}
}
debería funcionar para usted ... intente con esto
Las dimensiones efectivas de la pantalla del Nexus 5 son 360x598, por lo que en el paisaje, la ventana gráfica es más ancha que el extremo más alto de su consulta de medios. Puede capturar la orientación horizontal del nexo 5 aumentando su ancho máximo a 599px.
@media screen and (max-width: 599px) { ... }