what pass in width: 320px

I have a problem with a media query in 320px width.. in my general css for standard web resolutions I have this:

body {
    background-image:url(../Images/FondoSL.png);
    font-family: 'Open Sans', sans-serif;
    font-size:1em;
}

.headerPartOne p{
    font-size:0.94em;
    color:#676767;
    margin-left:30px;
    margin-top:5px;
    margin-bottom:0;
}

.contentContentPage fieldset ul li span {
    font-style:italic;
    font-size:0.98em;
    margin-left:35px;
}

and in the media query 320px this:

@media only screen and (min-width: 320px) {

    body {
        font-size:0.7em;
    }

    .headerPartOne p{
        font-size:0.74em;
        color:#676767;
    }

    .contentContentPage fieldset ul li span {
        font-style:italic;
        font-size:0.48em;
    }

}

also i have another media query for web and mobile screen resolutions

@media only screen and (min-width: 600px) and (max-width: 800px)
@media only screen and (min-width: 533px) and (max-width: 853px)
@media only screen and (min-width:1920px)

these media queries work fine.

well my problem is that the query 320px's style is applied to all resolutions, this means that if I run a query to a larger average resolution keeps the styles in 320px media query .. why is this? with other query I do not feel the same, each applies the style I want. (if I not put the 320px media query)

sorry for my english.. thanks

Solution

Lets take this one css rule as an example.

Lets remember, that CSS stands for Cascading Style Sheets. So the rules at the bottom of the sheet overwrite any rules that came before it.

So if you have

body { 
    font-size: 1em;
}

on line 25 of your css style sheet.

and have

@media only screen and (min-width: 320px) {

body {
    font-size:0.7em;
}

}

on line 114 of your css style sheet.

The font-size will be 0.7em, since it overwrote the previous style.

Lets say instead of that @media query you did this instead

@media only screen and (max-width: 320px)  { /* notice the max-width instead of min-width */

body {
    font-size:0.7em;
}

}

The font-size will then appear as 1em on regular screens, (any screen above 320px).