Media Queries CSS3

Como se puede leer en el titulo mi problema es con el comando "Media Queries" del CSS3.

Tengo mirado varias páginas web sobre como se usa este comando. Una de las páginas que me mire me ha parecido bastante interesantel como explica el tema. La página esta bien explicada, solo que ha la hora de usar las "Media Queries" estas no funcionan o lo hacen al reves de como deben. Para conseguir explicar mejor mi situación voy a colocar un código (con comentarios de lo que creo que hace para que, en el caso que alguien quiera ver si funcionan estos código o no lo haga personalmente) de ejemplo y lo que me gustaría que haga este código.

Media Queries:

body {
   background-color: #000000;
}

<!-- Si la pantalla es menor a 800px (sin incluir el tamaño de 800px) aplicara el siguiente cambio -->
@media screen and (max-width: 800px) {
   body {
      background-color: #858585;
   }
}

<!-- Si la pantalla es menor a 1024px y mayor a 800px aplicara el siguiente cambio -->
@media screen and (min-width: 800px) and (max-width: 1024px) {
   body {
      background-color: #FF0000;
   }
}

<!-- Si la pantalla es mayor a 1024px y menor a 1366px aplicara el siguiente cambio -->
@media screen and (min-width: 1024px) and (max-width: 1366px) {
   body {
      background-color: #FFFF00;
   }
}

<!-- Si la pantalla es mayor a 1366px (aplicara el siguiente cambio) -->
@media screen and (min-width: 1366px) {
   body {
      background-color: #00FF00;
   }
}

Creo, por las páginas que me he leído acerca de este tema, que el código esta correctamente escrito y debería funcionar como deseo. Mi objetivo con las "MEdia Queries" es realizar las siguientes ordenes:

1. Definir un color de fondo general.

2. Si la pantalla tiene un tamaño de 800px o inferior aplicara otros estilos diferentes.

3. Si la pantalla tiene un tamaño mayor a 800px pero es menor a 1024px se aplicaran otros estilos diferentes.

4. Si la pantalla tiene un tamaño mayor a 1024px aplicar otros estilos diferente.

Si alguien coloca un ejemplo de este código (que funcione) con simplemente cambiar el color de fondo de la página para yo comprobar que funciona me sirve. También decir que, si alguien sabe de un curso sobre las "Media Queries" que este bien y medio completo agradecería que colocase un enlace.

De antemano gracias por la ayuda prestada.

Hola!

¿Tienes esos comentarios en el archivo CSS (o dentro de la etiqueta style)? Si es así, quítalos. Los comentarios en CSS son entre /* */.

A mi me funciona bien.

Buenas:

Pido disculpas por el retraso de esta respuesta. Descubrí donde estaba mi error y ahora tengo la siguientes dudas: ¿Porque el Media querie para 800px o menor no funciona?Tengo un menu desplegable dentro de un div con un tamaño definido por %,¿Porque cuando defino el tamaño del menu al 100% dentro del div este lo sobrepasa?

Puede ser porque el div tiene padding o margin o está flotando (float left| right).

Pues tengo el div con un margin 0 auto; y dentro de ese es donde tengo el menu con width 100%

alex222en escribió:Pues tengo el div con un margin 0 auto; y dentro de ese es donde tengo el menu con width 100%

Buenas, decir que eso esta solucionado, aunque no entendí porque se me soluciono de la manera que hice pero la cosa es que funciona. Quitando eso tengo el siguiente problema, dentro del @media para pantallas entre 800px y 1024px tengo exactamente igual a las demás definido un tamaño mínimo para la pantalla, haciendo que esta después se ajuste automáticamente si aumenta. El problema es que al colocar min-width: 800px; me crea ese mínimo a los 1000px, aunque le reduzca el numero de pixeles me lo sigue definiendo a ese tamaño mínimo de 1000px. ¿Porque me puede estar pasando? Decir que tengo definido exactamente igual en los otros archivos CSS y que me funcionan a la perfección.

Dejo el código como muestra:

Pantalla entre 800 y 1024px

@media screen and (min-width: 800px) and (max-width: 1024px) {
   body {
    	min-width: 800px;
        width: 100%;
    	border-style: solid;
    	border-color: white;
    }

    #base {
		width: 796px;
		height: auto;
		margin: 0 auto;
		background-color: rgba(80, 80, 80, 0.8);
	}

	#pagina {
		width: 80%;
		height: auto;
		margin: 0 auto;
		background-color: rgba(255, 255, 255, 0.8);
	}

/* Cabecera */
	/* Menu Horizontal */
		.nav {
			width: 93.6%;
		}
}

Pantalla entre 1024 y 1365px:

@media screen and (min-width: 1024px) and (max-width: 1365px) {
   body {
    	min-width: 1024px;
    	width: 100%;
	}

	#base {
		width: 1020px;
		height: auto;
		margin: 0 auto;
		background-color: rgba(80, 80, 80, 0.8);
	}

	#pagina {
		width: 80%;
		height: auto;
		margin: 0 auto;
		background-color: rgba(255, 255, 255, 0.8);
	}

/* Cabecera */
	/* Menu Horizontal */
		.nav {
			width: 95.2%;
		}
}