CODEWITHSUNDEEP
csshtmlframeworksmedia-queries
roroland
roroland

Reputation: 174

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

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

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?

Upvotes: 5

Views: 1867

Answers (1)

user641656
user641656

Reputation:

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...

Upvotes: 7

Related Questions