CSS response: A few ways to load different CSS according to the resolution path, pro-Test available

Sometimes you need to have the same page open at the same time on the phone and the PC, one of the ways is to determine the different resolution to load different CSS

The small series summarizes several ways to load CSS separately:

1. More complex use JS to judge the load of different CSS (pro-Test available)

But this method will only be judged at the very beginning, if you drag the browser size will not change (of course, if you like to drag the game)

1<link rel= "stylesheet" type= "Text/css" id= "Links" href= ". /css/m_wuqinglan.css "/>2<script type= "Text/javascript" >3Window.onload=function(){ 4                 varSc=document.getelementbyid ("Links"); 5                     if(window.screen.width>1024)//gets the width of the screen6                     { 7Sc.setattribute ("href", "... /css/pc_wuqinglan.css ");//Computer8                     } 9                     Else{ TenSc.setattribute ("href", "... /css/m_wuqinglan.css ");//Mobile Phone One                     }  A             } -</script>

2. Relatively simple and handsome to use the media query to load the corresponding CSS

will be executed as you drag the window size

Medium is the media query range, when the maximum width is 1200, here is the mobile phone tablet size load cell phone css, and conversely, computer CSS
<link rel= "stylesheet" type= "Text/css" href= ". /css/m_wuqinglan.css "media=" screen and (max-width:1200px) "/><link rel=" stylesheet "type=" Text/css "href=" ... /css/pc_wuqinglan.css "media=" screen and (min-width:1201px)/>

3. The most exciting way, of course, is to direct the media query and then write the style

1 @media only screen and (max-width:1024px){2 . div1{3 width:50%;4}6 . Div2{7 width:50%;8}Ten . Div3{ One width:50%; A} - } -  the @media only screen and (min-width:1024px){ - . div1{ - width:100%; -} - . Div2{ + width:100%; A} - . Div3{ - width:100%; -} - }

Of course, to do IE-compatible babes, media queries are not supported IE9 (temporarily), of course, can rely on third-party compatibility

CSS response: A few ways to load different CSS according to the resolution path, pro-Test available