집 >웹 프론트엔드 >CSS 튜토리얼 >다양한 해상도로 CSS 파일 메소드 호출

다양한 해상도로 CSS 파일 메소드 호출

php中世界最好的语言원래의: 2017-11-29 10:14:161834검색

프론트엔드 개발을 할 때 가장 두려운 문제 중 하나가 해상도와 호환성이라는 것을 알고 있으므로 오늘은 서로 다른 해상도를 호출하는 문제를 해결해 보겠습니다. 살펴보겠습니다

다음 JS 코드를 93f0f5c25f18dab9d176bd4f6de5d30e 및 9c3bca370b5104690d9ef395f2c5f8d1 태그에 넣으세요. 이 JS 코드의 기능은 브라우저 해상도를 식별하는 것입니다

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

설명:

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

따옴표 각각 IE를 사용하고 해상도가 1024*768, 800*600, 1152*864인 경우 사용할 CSS 파일 이름입니다.

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

사용자가 FF를 사용할 때 따옴표를 각각 입력합니다. 해상도는 1024*768,800*600,1152*864 css 파일명을 사용합니다.

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

따옴표 안에 각각 채워주시고, 사용자가 다른 브라우저를 사용할 때 사용할 CSS 파일명이며 해상도는 1024*768, 800*600, 1152*864입니다.

해상도는 판단하지 않고 브라우저만 판단합니다

E.Qiang의 제안에 따라 다음 코드가 컴파일되었습니다. 브라우저 유형에 따라 다른 CSS를 자동으로 호출합니다.

다른 CSS 파일 호출 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>

설명:

브라우저가 IE인 경우 default.css를 호출하세요.

브라우저가 Firefox인 경우 default2.css를 호출하세요.

브라우저가 다른 경우 call newsky.css

사용법: 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1에 넣습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!