reconocer resolucion de pantalla y redireccionar a css

[tasmany94]

mm chicos no me funciona este codigo..decirme porque esta mal xd


body {
margin:0%;
width:100%;
height:100%;
}
.pagina {
float:left;
clear:both;
margin-left:20%;
width:500px;
height:600px;
background-color:#0099FF;
}
.contenedor {
float:left;
clear:both;
margin-top:200px;
width:500px;
height:200px;
background-color:#00FF66;
text-align:center;
font-size:36px;
font-weight:bold;
}
/*resolucion de 1024*/
@media screen and (max-width: 1199px) and (min-width: 1001px) {
.pagina {
width:600px;
height:768px;
background-color:#FF00FF;
}
}
/*resolucion de 1280*/
@media screen and (max-width:1399px) and (min-width: 1200px) {
.pagina {
width:800px;
height:768px;
}
}
/*resolucion de 1400*/
@media screen and (max-width:1599px) and (min-width: 1400px) {
.pagina {
width:900px;
height:768px;
}
}
/*resolucion de 1600*/
@media screen and (min-width:1600px) {
.pagina {
width:1000px;
height:1024;
background-color:#9999FF;
}
}

los cambios de colores es para comprobarlo mejor que me cambia..pero no funciona..no se puede tener varios @media screen juntos?? o como seria?