reconocer resolucion de pantalla y redireccionar a css

[tasmany94]

bueno ya lo probe.pero ahooora el problema..que vamos mas bien es una consulta..

he puesto este codigo:

@media screen and (max-width:1001px) {

.pagina {
float:left;
clear:both;
margin-left:20%;
width:500px;
height:600px;
background-color:#0099FF;
}
}

@media screen and (max-width: 1200px) and (min-width: 1001px) {
.pagina {
width:900px;
background-color:#FF00FF;
}
}

pero la cuestion de esto,en la resolucion segunda..osea..entre 1001 y 1200,

se me queda el estilo solo el de:
.pagina {
width:900px;
background-color:#FF00FF;
}

me imagino que sera por el primero @media screen and (max-width: 1001px),

osea.primero debo poner los estilos y luego los @media, pero el estilo por defecto tiene que estar.la cuestion es,que tamaño se pone de defecto,y cuando volvera a el?

por lo que tengo entendido, si pongo el de defecto a 800x600 y con @media pongo para las demas resoluciones, se ajustaria a esa resolución no?

gracias de antemano.