Calling css file methods with different resolutions-CSS Tutorial-php.cn

Calling css file methods with different resolutions

php中世界最好的语言

Release： 2017-11-29 10:14:16

Original

1809 people have browsed it

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>

Copy after login

Explanation:

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

Copy after login

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="";

Copy after login

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="";

Copy after login

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>

Copy after login

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

# 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!