Recently looked at a website, found that the display of different resolution, style file calls are not the same, today wrote an example to study,
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> Untitled Document </title>
<link rel= "stylesheet" id= "SC" type= "text/css" href= "Css/c1.css"/>
<script type= "Text/javascript" >
Window.onload=function () {
var Sc=document.getelementbyid ("SC");
var D=document.getelementbyid ("D");
if (screen.width>1024)//Get the width of the screen
{
Sc.setattribute ("href", "css/c2.css"); Set CSS to introduce a style sheet path
d.innerhtml = "Your computer screen width is greater than 1024, my width is 1200px, the background color is now red." ";
}
else{
Sc.setattribute ("href", "css/c1.css");
d.innerhtml = "Your computer screen width is less than or equal to 1024, my width is 960px, the background color is now blue." ";
}
}
</script>
<body>
<div id= "D" ></div>
</body>
What's inside C1.css
Copy Code code as follows:
*{margin:0; padding:0;}
div{width:960px height:400px; margin:0 auto; background:blue; color: #ffffff;}
What's inside C2.css
Copy Code code as follows:
*{margin:0; padding:0;}
div{width:1200px height:400px; margin:0 auto; background:red; color: #fff;}
