Ejercicio Media-Queries muy simple
Hola, estoy haciendo algunas pruebas con media-queries, es algo muy sencillo pero no funciona.
Se me ocurrio intentar cambiar en 3 resoluciones distintas el color de una caja. El caso es que no consigo que se vean nada más que dos colores y eso que le he dado vueltas.
No se si alguien ha intentado hacer lo que yo. Solo consigo que se vea el verde (a pantalla completa) y el azul (cuando cambio de tamaño la ventana).
Estos son mis media:
@media only screen and (max-width : 1599px) {
/* Styles */
.container{
background-color:red;
}
}/*---*/
@media only screen and (min-width : 1600px) and (max-width : 1820px){
/* Styles */
.container{
background-color:blue;
}
}/*---*/
@media only screen and (min-width : 1821px) {
/* Styles */
.container{
background-color:green;
}
}/*---*/
Gracias
MAXer3D
A mi tu código me funcionó bien.
¿Con qué navegador lo estas probando?
@media only screen and (max-width : 1599px) {.container{background-color:red;}}
@media only screen and (min-width : 1600px) and (max-width : 1820px){.container{background-color:blue;}}
@media only screen and (min-width : 1821px) {.container{background-color:green;}}
JCMartinez
Gracias por probarlo, ya he encontrado el fallo. Tenía otras media-queries que no había visto en otro css que estaba importando y al eliminarlas a funcionado. Estaban creando un conflicto y no salía lo que yo quería.