Why isn't my media query for smaller breakpoints being implemented?

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 doesn't 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;
   }
}
   ...