I recently read a website and found that different resolutions of the display and style files are called differently. Today I wrote an example to study it,
Copy codeThe Code is as follows: <! Doctype html>
<Html>
<Head>
<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) // obtain the screen width.
{
SC. setAttribute ("href", "css/c2.css"); // you can specify the path for css to introduce a style sheet.
D. innerHTML = "the screen width of your computer is greater than 1024. My width is pixel PX, and the background color is red now. ";
}
Else {
SC. setAttribute ("href", "css/c1.css ");
D. innerHTML = "your computer's screen width is less than or equal to 1024. My width is 960px, and the background color is blue now. ";
}
}
</Script>
</Head>
<Body>
<Div id = "d"> </div>
</Body>
</Html>
Content in c1.css Copy codeThe Code is as follows: * {margin: 0; padding: 0 ;}
Div {width: 960px; height: 400px; margin: 0 auto; background: blue; color: # ffffff ;}
Content in c2.css Copy codeThe Code is as follows: * {margin: 0; padding: 0 ;}
Div {width: pixel PX; height: 400px; margin: 0 auto; background: red; color: # fff ;}
