title: media query for 320px and less
body: <p>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.</p>
  
  <pre><code>@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;
         }
     }
  </code></pre>
  
  <p>For 320px I also tried with </p>
  
  <pre><code>@media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 480px) 
  and (orientation : portrait)
  { /*Styles */}
  </code></pre>
  
  <p>and </p>
  
  <pre><code>@media only screen 
  and (max-width : 320px) {
  /* Styles */
  }
  </code></pre>
  
  <p>But none of them is working.Am I doing anything wrong/missing something?
  Thanks in advance</p>