Question

I have a few questions about css media queries.

I. Does both css files (for example normal.css and lessthan1024.css) have to include all css rules? Or can lessthan1024.css include just rules that are different?

II. Does it work with browser resize? Or does page have to be refreshed?

Thanks

Answer 1

I. Let’s say you want to have a header with a blue background, no matter the resolution. If you include in your lessthan1024.css file only what is different, that means you won’t have a blue background for the header at less than 1024px. So what do you think is the answer to your question in this case?

II. It works on resizing the browser window. No refresh.

---

That being said, I believe it would probably be better to:

I. Use a mobile-first approach – that means that you start with the smallest display sizes as being the norm and then you start adjusting the look of your page for larger displays

II. Put all CSS, for all display sizes in one file, using @media rules; example:

/* base styling: common rules + smallest display rules*/

@media only screen and (min-width: 35em) {
    /* adjust style for larger display */
}

The reason I believe this is better is because… well, if you use 2 .css files, then you will have some rules duplicated. Let’s say you want to change some of them. You’ll have to make the same changes in 2 places. Maybe you forget to make the changes in one file. Or maybe you don’t remember that you’ve set a padding to 1em in one file and you set it to 2em in the other file.