Appel de méthodes de fichiers CSS avec différentes résolutions

Nous savons que l'un des problèmes les plus redoutés lors du développement front-end est la résolution et la compatibilité, nous allons donc aujourd'hui résoudre le problème de l'appel de différentes résolutions. Jetons un coup d'oeil

Mettez le code JS suivant dans les balises et La fonction de ce code JS est d'identifier la résolution du navigateur

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

.

Explication :

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

Remplissez respectivement les guillemets. Lorsque l'utilisateur utilise IE et que la résolution est 1024*768, 800*600, 1152*864, le nom du fichier CSS à utiliser. être utilisé.

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

Remplissez respectivement les guillemets et le nom du fichier CSS à utiliser lorsque l'utilisateur utilise FF et que la résolution est de 1024*768, 800 *600, 1152*864. ​

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

Remplissez respectivement les guillemets et le nom du fichier CSS à utiliser lorsque l'utilisateur utilise d'autres navigateurs et que la résolution est de 1024*768, 800* 600, 1152*864.

Ne juge pas la résolution, seulement le navigateur

En réponse à la suggestion de E.Qiang, le code suivant a été compilé. Appelez automatiquement différents CSS selon le type de navigateur.

Appelez différents fichiers CSS Code JS :

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

Explication :

Si le navigateur est IE, appelez default.css

Si le navigateur est Firefox, appelez default2.css

Si le navigateur est autre, appelez newsky.css

Utilisation : Placer dans < Cliquez simplement dessus.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment convertir du HTML 2D et 3D

Comment utiliser CSS pour superposer deux DIV

Étapes de mise en œuvre de la vidéo et de l'audio HTML5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!