媒体查询

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-width: 600px)" href="small.css">
<link rel="stylesheet" media="screen and (min-width: 4000px)" href="big.css">

2nd by using Javascript

if (window.matchMedia(‘screen and (min-width: 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-width:320px)  { /* smartphones,portrait iPhone,portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones,Android phones,landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets,portrait iPad,e-readers (Nook/Kindle),landscape 800x480 > phones (Android) */ }
@media (min-width:801px)  { /* tablet,landscape iPad,lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets,laptops,and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }