media query for 320px and less - html

Question

I am writing a media query for a web-page and managed to write media queries for 480px and more. But when I write media query for 320px it doesn't work properly. I want to capture the portrait views of most of the mobiles( iphone4, iphone5,iphone3,asus galaxy 7,samsung galaxy sII, samsung galaxy s3 ) which is 320px. The webpage I created was working with landscape views in these devices but doesnt scale for portrait views. Can anybody please point out the error in the query. This is the media queries I used.
#media (max-width: 320px)
{
html
{
font-size:0.1em;
}
}
#media (max-width: 480px)
{
html
{
font-size:0.20em;
}
}
#media (max-width: 767px)
{
html
{
font-size:0.38em;
}
}
#media (min-width: 768px) and (max-width: 979px)
{
html
{
font-size:0.65em;
}
}
#media (min-width : 980px) and (max-width:1025px)
{
html
{
font-size:0.7em;
}
}
For 320px I also tried with
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : portrait)
{ /*Styles */}
and
#media only screen
and (max-width : 320px) {
/* Styles */
}
But none of them is working.Am I doing anything wrong/missing something?
Thanks in advance

Answer 1

Since you don't have a min-width on your 480 styles, and since those styles come later in your stylesheet, they override anything you put before them.
#media (max-width: 320px) {
html {
font-size:0.1em;
}
}
#media (min-width: 321px) and (max-width: 480px) {
html {
font-size:0.20em;
}
}
...

Answer 2

A
#media (max-width: 320px)
{
html { font-size:0.1em; }
}
B
#media (max-width: 480px)
{
html { font-size:0.20em; }
}
Using the above, consider a 320px viewport.
A and B are true, as 320 hits the limit of A and falls well below the max of B. But since B overrides A by being declared later in the stylesheet, font-size is dictated by the later declaration -- B
Adding a min-width:321px requirement to B would force B to test false for the 320px viewport -- so font-size would stay at 0.1em until B became true (minimum width of 321px).
EDIT (maybe a better way to think about it)
Instead of using max, max, max, why not take advantage of the min-width, until you reach a UI that may be best served with a range (like a tablet)
/* Set a base */
html { font-size:62.5% }
/* iPhone landscape range */
#media (min-width:321px) and (max-width:480px) {
html { font-size:1.2em }
}
/* larger than iPhone landscape, an in the iPad portrait range */
#media (min-width:481px) and (max-width:768px) {
html { font-size:1.6em }
}
/* bigger than iPad portrait */
#media (min-width:769px) {
html { font-size:2em }
}