Salve sto sbagliando sicuramente qualcosa, ma non riesco a capire cosa.
Sto facendo un test per comprendere meglio i principi di responsive design ed ho realizzato un codice html e css basico per vedere come si comporta nei diversi device. (in realtà sto testando solo su: portatile, iphone 3S, iphone 4, ipad air)

il codice html è questo:

<div class="wrap">

<h1>titolo</h1>

</div>

mentre il css è questo:
.wrap{ width:1100px; margin:0 auto; padding:20px 0;}
h1{ text-align:center;}

e i media query:
@media only screen and (min-width:1024px){
.wrap{background-color:red;}
}

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

.wrap{ width:90%;}

}

@media only screen and (min-width:769px) and (max-width:1024px){

.wrap{ background-color:blue;}

}

@media only screen and (min-width:481px) and (max-width:768px) {
.wrap{ background-color:#063;}

}

@media only screen and (max-width:480px){
.wrap{ background-color:#663;}
}

mi aspettavo che in base alla larghezza del device il colore dello sfondo di wrap cambiasse, e così avviene se ridimensiono la finestra del browser su portatile, se invece guardo con gli altri dispositi tutto rimane impostato come se la risoluzione sia tra 768 e 1024, anche su iphone.
qualcuno sa darmi qualche consiglio

grazie