Question

I’ve just download 320 and up 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?

Answer 1

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…