WRD- Le media queries non funzionano correttamente

[robk]

ciao a tutti,
Ho un problema riguardante le media queries:
ho creato dei breackpoint in modo che in base alla risoluzione cambiasse anche l'indentazione degli articoli etc. In precisione devo fare in modo che quando la risoluzione arriva a 320 e 480 px questo div, che sarà a fianco un altro dividendosi la pagina rispettivamente 50% e 40%, andrà a posizionarsi sotto l'altro div e prenda larghezza totale.

Cosa succede:
io quando vado a modificare un valore all'interno di media queries, 480px, di un div che ho già dichiarato precedentemente nel file .css, modifica anche tutti gli altri.

Il codice:

#map{	float:left;
	position:relative;
        width:50%;
	height:100%;
	background:#dddddd;
	border-top-left-radius:     20px;
	border-top-right-radius:    20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius:  20px;
	margin-top: 20px;
	margin-left: 20px;
	margin-right:20px;
}
@media only screen and (min-width: 320px)
{ #map{ 
      width:none;
          }
}

La soluzione potrei averla trovata, ma mi sembra estremamente pesante scrivere per ogni breackpoint creato un div diverso:

@media only screen and (min-width: 320px){ #map{ 
        width:100%;
        float:left;
	position:relative;
	height:100%;
	background:#dddddd;
	border-top-left-radius:     20px;
	border-top-right-radius:    20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius:  20px;
	margin-top: 20px;
	margin-left: 20px;
	margin-right:20px;
          }

}
@media only screen and (min-width: 480px){ #map{ 
        width:100%;
        float:left;
	position:relative;
	height:100%;
	background:#dddddd;
	border-top-left-radius:     20px;
	border-top-right-radius:    20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius:  20px;
	margin-top: 20px;
	margin-left: 20px;
	margin-right:20px;
          }

}

Cosa ne pensate?
Grazie