Question

This question is NOT about what CSS Media Queries are, but more on what is the correct usage for it.

So I plan to create some fluid pages which would have slight UI differences when viewed on desktop/tablet/mobile

So my questions are;

1. For 1 page, should I create separate CSS files for desktop/mobile/tablet and then call them using

link href="desktop.css" media="..."
link href="ipad.css" media="..."

OR use a single/common CSS and have the media queries within them like

Common.css

@media ….
//desktop styles

@media ….
//ipad styles

I mean will having separate CSS create some lag, boz of multiple http requests to be made..like even for desktop, at smaller/squeezed browser sizes, i can switch to mobile css..So will having separate CSS create some lag?

1. Is there any order to be followed while defining the media queries, which would help from a future compatibility point of view e.g. let’s say for now, I’ll just want to support desktop and iPad…But in future,i want to support iPhone as well…
   So what should be the correct way/order of declaring the media queries ?

Just to add,I am not yet 100% decided on whether to use just width OR device-width, but you can assume either of them (Most propbably it will be device-width) and provide your suggestions..

Thank you.

Answer 1

1. Use single file, because its one request and it because can be more efficiently gzipped.
2. Order of media queries does not matter, IF they don’t overlap. (They can operlap just like regular css – ie, if you have media query for (min-width: 320px) and for (min-width: 480px) – and your screen is 1920px – then both queries will be processed).

If you want to know more about them: here are Good, Bad and Ugly sides.