Calling css file methods with different resolutions

We know that one of the most feared things when doing front-end development is resolution and the other is compatibility, so today we will solve the problem of calling different resolutions. Let’s take a look

Put the following JS code into the

and tags. The function of this JS code is to identify the browser resolution

 <SCRIPT LANGUAGE="javascript"> 
<!-- 
if (window.navigator.userAgent.indexOf("MSIE")>=1) 
{ 
var IE1024=""; 
var IE800=""; 
var IE1152=""; 
var IEother=""; 
ScreenWidth(IE1024,IE800,IE1152,IEother) 
}else{ 
if (window.navigator.userAgent.indexOf("Firefox")>=1) 
{ 
file://如果浏览器为Firefox 
var Firefox1024=""; 
var Firefox800=""; 
var Firefox1152=""; 
var Firefoxother=""; 
ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother) 
}else{ 
file://如果浏览器为其他 
var Other1024=""; 
var Other800=""; 
var Other1152=""; 
var Otherother=""; 
ScreenWidth(Other1024,Other800,Other1152,Otherother) 
} 
} 
function ScreenWidth(CSS1,CSS2,CSS3,CSS4){ 
if ((screen.width == 1024) && (screen.height == 768)){ 
setActiveStyleSheet(CSS1); 
}else{ 
if ((screen.width == 800) && (screen.height == 600)){ 
setActiveStyleSheet(CSS2); 
}else{ 
if ((screen.width == 1152) && (screen.height == 864)){ 
setActiveStyleSheet(CSS3); 
}else{ 
setActiveStyleSheet(CSS4); 
}}} 
} 
function setActiveStyleSheet(title){ 
document.getElementsByTagName("link")[0].href="style/"+title; 
} 
file://--> 
</SCRIPT>

Explanation:

var IE1024="";
var IE800="";
var IE1152="";
var IEother="";

Fill in the quotation marks respectively, and the css file name to be used when the user uses IE and the resolution is 1024*768, 800*600, 1152*864.

       var Firefox1024="";
var Firefox800="";
var Firefox1152="";
var Firefoxother="";

Fill in the quotation marks respectively, and the css file name to be used when the user uses FF and the resolution is 1024*768, 800*600, 1152*864.

　　var Other1024="";
var Other800="";
var Other1152="";
var Otherother="";

Fill in the quotation marks respectively, and the css file name to be used when the user uses other browsers and the resolution is 1024*768, 800*600, 1152*864.

Does not judge the resolution, only judges the browser

In response to E.Qiang's suggestion, the following code was compiled. Automatically call different CSS according to browser type.

Calling different CSS files JS code:

<SCRIPT LANGUAGE="javascript"> 
<!-- 
if (window.navigator.userAgent.indexOf("MSIE")>=1) 
{ 
file://如果浏览器为IE 
setActiveStyleSheet("default.css"); 
}else{ 
if (window.navigator.userAgent.indexOf("Firefox")>=1) 
{ 
file://如果浏览器为Firefox 
setActiveStyleSheet("default2.css"); 
}else{ 
file://如果浏览器为其他 
setActiveStyleSheet("newsky.css"); 
} 
} 
function setActiveStyleSheet(title){ 
document.getElementsByTagName("link")[0].href="style/"+title; 
} 
file://--> 
</SCRIPT>

Explanation:

If the browser is IE, call default.css

If the browser is Firefox, call default2.css

If the browser is other, call newsky.css

Usage: Place in

> ; Just hit it.

# I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to convert 2d and 3d HTML

How to use CSS to operate two DIVs overlapping

HTML5 video and audio implementation steps

The above is the detailed content of Calling css file methods with different resolutions. For more information, please follow other related articles on the PHP Chinese website!