Error en sintaxis responsive.

[quad22]

Estoy configurando un documento *.html en responsive, pero cuando visualizo el resultado de:

@media (max-width: 1280px) and (max-height: 800px) { ... }


No se aplica ninguna configuración css porque coge la siguiente:

@media (max-width: 1280px) and (max-height: 720px) { ... }


He probado cambiar con:

@media (min-width: 1025px) and (max-width: 1280px) and (min-height: 721px) and (max-height: 800px) { ... }

Y no he tenido resultados.


¿Donde está el error?

[Bultack]

En qué orden tienes puedas las media queries? Si las tienes en el orden que las has puesto deberían funcionar.

[quad22]

En ese mismo orden. Pero el max-width:800px no lo coge y sí el max-width:720px.

[Bultack]

Pero quieres aplicar el cambio al cambiar el ancho o el alto? Porque en #1 la segunda condición hace referencia al height y en #3 dices el width.

[quad22]

Es:

@media (max-width: 1280px) and (max-height: 800px) y
@media (max-width: 1280px) and (max-height: 720px)

Persigo que los contenedores se adapten centrados al alto de un dispositivo de MacBooks de 13" (max-height: 800px) y para el alto de un formato de HD (dispositivo o TV): (max-height: 720px).

Hasta 720px de alto debe coger un formato de centrado y desde 721px hasta 800px debe coger otro.

[cesan]

Hola,
Si quieres que se ejecute un código para un tamaño de pantalla y otro para otro te recomiendo poner el condicional solamente con al anchura de la pantalla. Por ejemplo, yo tengo estos códigos para que se muestre el menu diferente en versión móvil y versión ordenador:
@media only screen and (max-width: 767px) {


}

@media only screen and (min-width: 768px) {


}