Aufrufen von CSS-Dateimethoden mit unterschiedlichen Auflösungen

Wir wissen, dass Auflösung und Kompatibilität eines der am meisten gefürchteten Probleme bei der Front-End-Entwicklung sind. Deshalb werden wir heute das Problem lösen, unterschiedliche Auflösungen aufzurufen. Werfen wir einen Blick darauf

Fügen Sie den folgenden JS-Code in die Tags ein. Die Funktion dieses JS-Codes besteht darin, die Browserauflösung zu identifizieren

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

Erklärung:

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

Füllen Sie die Anführungszeichen entsprechend aus verwendet werden.

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

Geben Sie jeweils die Anführungszeichen und den zu verwendenden CSS-Dateinamen ein, wenn der Benutzer FF verwendet und die Auflösung 1024*768, 800 beträgt *600, 1152*864. ​

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

Geben Sie jeweils die Anführungszeichen und den zu verwendenden CSS-Dateinamen ein, wenn der Benutzer andere Browser verwendet und die Auflösung 1024*768, 800* beträgt 600, 1152*864.

Beurteilt nicht die Auflösung, sondern nur den Browser

Als Reaktion auf den Vorschlag von E.Qiang wurde der folgende Code kompiliert. Rufen Sie je nach Browsertyp automatisch unterschiedliche CSS auf.

Aufruf verschiedener CSS-Dateien 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>

Erklärung:

Wenn der Browser IE ist, rufen Sie default.css

Wenn der Browser Firefox ist, rufen Sie default2.css auf

Wenn der Browser ein anderer ist, rufen Sie newsky.css auf

Verwendung: Platzieren Sie in < Klicken Sie einfach darauf.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So konvertieren Sie 2D- und 3D-HTML

So verwenden Sie CSS, um zwei DIVs zu überlappen

HTML5-Video- und Audio-Implementierungsschritte

Das obige ist der detaillierte Inhalt vonAufrufen von CSS-Dateimethoden mit unterschiedlichen Auflösungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!