This method supports IE and other browsers.
1. Define two links first. Of course, you can also be one, and the second is the css to be changed.
Copy codeThe Code is as follows:
<Link rel = "stylesheet" type = "text/css" href = "main.css"/>
<Link id = "size-stylesheet" rel = "stylesheet" type = "text/css" href = "narrow.css"/>
2. The following JavaScript code will change css based on different browser sizes.
Copy codeThe Code is as follows: function adjustStyle (width ){
Width = parseInt (width );
If (width <701 ){
$ ("# Css"). attr ("href", "css/narrow.css ");
} Else if (width> = 701) & (width <900 )){
$ ("# Css"). attr ("href", "css/medium.css ");
} Else {
// $ ("# Css"). attr ("href", "<? Php bloginfo ('stylesheet _ url');?> ");
Document. write ("css/style.css ")
}
}
$ (Function (){
AdjustStyle ($ (this). width ());
$ (Window). resize (function (){
AdjustStyle ($ (this). width ());
});
});
The above code has been tested and available !!