媒体查询的三种方式

responsive design - On desktop PC, mobile css loads first, then it switches to the desktop version - Stack Overflow

There are few approach you can use

1st Approach by using CSS File

<link rel="stylesheet" media="screen and (min- 600px)" href="small.css">
<link rel="stylesheet" media="screen and (min- 4000px)" href="big.css">

2nd by using Javascript

if (window.matchMedia('screen and (min- 600px)')){
  document.write('<link rel="stylesheet" 
                  href="small.css">');
}

I suggest for better one you need use only one css file and define the concept like as below :

@media (min-320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 > phones (Android) */ }
@media (min-801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-1281px) { /* hi-res laptops and desktops */ }