320 and up mobile framework - Why stylesheets starts at 480?

I've just download [320 and up][1] for responsive design, the stylesheets are divided as follows:

- 480.css
- 600.css
- 768.css
- 992.css
- 1382.css

And print.css, style.css and 2x.css

I don't understand why isn't a 320.css stylesheet, or I should use style.css for that resolution?

[1]:

[To see links please register here]

Nope, you're right. Anything that's LESS THAN 480px will load the `styles.css` for these media queries, courtesy of the `min-width` settings on the media queries:

<!-- For all browsers -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media="print" href="css/print.css">
<!-- For progressively larger displays -->
<link rel="stylesheet" media="only screen and (min-width: 480px)" href="css/480.css">
<link rel="stylesheet" media="only screen and (min-width: 600px)" href="css/600.css">
<link rel="stylesheet" media="only screen and (min-width: 768px)" href="css/768.css">
<link rel="stylesheet" media="only screen and (min-width: 992px)" href="css/992.css">

So with the device widths, the designs for 0 - 480px (including 320px) will go in `style.css`

480 to 600 = `480.css`

600 to 768 = `600.css`

768 to 992 = `768.css`

992+ = `992.css`

But if you want to have more fine-grain controls over the 320 resolution you can add another media query:

`<link rel="stylesheet" media="only screen and (min-width: 320px)" href="css/320.css">`

and then create the `320.css` stylesheet in the css directory. This sheet will be good for resolutions 320 - 480. Which means that now anything less than 320 will load `style.css`.

I think the idea of leaving that resolution out is that you'd create some a fluid or flexible layout that would work for both resolutions...