Performance: Many CSS files for media queries vs 1 big CSS file with queries inside?

HTML & CSS
1

I am wondering what is better for performance. If I have media queries defined like this:

<link rel='stylesheet' media='screen and (min-width: 150px) and (max-width: 630px)' href='mobile.css' />
<link rel='stylesheet' media='screen and (min-width: 631px) and (max-width: 768px)' href='almost_mobile.css' />

Now let’s say my browser width is 600. Does the browser load EVERY css file in advance, or does it only load the almost_mobile.css, and when I minimize below 630px, it will then load mobile.css?
If it loads all files at once on page load, then it would probably be smarter to include all the CSS in one big file (http requests) and configure the media queries inside of this CSS file, right?

2

It downloads all of them.

3

Thanks! Queston answered :).