Media Query For 320px And Less

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

Solution 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;
   }
}
   ...

Solution 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 }
}