Single CSS file for all @media vs separate CSS file for each @media

If I have all media types in single CSS file, for example

the below is a content of style.css

@media only screen and (min-width: 480px) {
   /* Style adjustments for viewports 480px and over go here */
 
 }
 
 @media only screen and (min-width: 768px) {
   /* Style adjustments for viewports 768px and over go here */
 
 }
 
 @media print {
  /* Style adjustments for Print go here */
 }
 

Will browser download download the CSS part of @media only screen and (min-width: 480px) and @media print if I open the file on a device which has min-width: 768px?

or browser will download whole css on the device even if it will be never used on same device. For example the devices which has maximum width of 480px in both orientation will never need the CSS code of written for the device with greater then 480px width or height even if the CSS is cached. it will be no use?

Is using separate CSS file for each media best for performance?

Which can increase the performance, HTTP request or a separate and only required code needed for device?

---