Media queries for a mobile HTML5 app

Question

I've basically gone mad trying to figure/google it out. iOS device are not an issue since there aren't so many and its easy to set for every single one, but the android and possibly BlackBerry come into the game...

Basically I have 4 sizes (S, M, L, XL) of CSS, but then there comes a phone like "HTC One" that has full HD (1920x1080) and 4.7 inches... how to i count this in? is there like a framework that covers most frames. HJow do i approach this? How do i cover most devices?

Cheers, K

Answer 1

Well, I can say the way I personally handle this is something like this:

<link rel="stylesheet" href="./css/base.css" type="text/css" media="all">
<link rel="stylesheet" href="./css/720_grid.css" type="text/css" media="screen and (min-width: 720px)">
<link rel="stylesheet" href="./css/986_grid.css" type="text/css" media="screen and (min-width: 986px)">
<link rel="stylesheet" href="./css/1236_grid.css" media="screen and (min-width: 1236px)" >

So I basically have three CSS files, and depending on the width of the screen, each of these is automatically loaded. The last one is for anything 1236 or higher.

Is this what you are looking for... or am I missing what you are asking?