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

[robk]

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

Adesso ho notato che modificando il breakpoint di 1900px viene modificato l'altro breakpoint di 1024 px! com'è possibile? sto sbagliando qualcosa ma non capisco cosa..

[robk]

Ho più o meno risolto posizionando in diversi file CSS le media queries.
Esempio 320.css:
/*media query for screens larges 320px*/
@media only screen and (min-width: 320px)
{
body, #content,
{
width: 320px;
overflow: auto;

}
#head
{
background-image: url('../assets/head320px.png');
background-repeat: no-repeat;
background-position: 0 0;
height:112px;
}
#footer{display:none;}

}

e nel file HTML ho inserito:

<link rel="stylesheet" media="only screen and (min-device-width: 320px)" href="css/320.css" />

ho fatto così anche con le altre dimensioni come 480px 768px e 1024 px.

Quando vado a modificare il width del div modifica la larghezza anche quando usi le media querie nelle misure 480, 768 e 1024!!
se non bloccano il flusso di dati quando non serve allora non va bene!

Qualcuno ha idea su che diavolo stia succedendo??