> 웹 프론트엔드 > JS 튜토리얼 > 화면 해상도_javascript 기술을 결정하는 js 코드

화면 해상도_javascript 기술을 결정하는 js 코드

WBOY
풀어 주다: 2016-05-16 17:28:43
원래의
1370명이 탐색했습니다.

일반적으로 다음 코드를 통해 해상도를 판단할 수 있습니다

코드 복사 코드는 다음과 같습니다.


js가 브라우저 해상도를 결정합니다

코드 복사 코드는 다음과 같습니다.

<script><br>function ScreenWidth (){ <br>                                                                                                   > 입력 유형="버튼" 이름="" 값="fenbianli " onclick=" ScreenWidth()"/><br><br> <br> <br>참고: 이 js 코드는 두 가지 경우에 수정하여 screen.width>=1024 및 screen.width=800으로 변경할 수 있습니다. <br> <br>그래서 저는 다음 코드를 사용하기로 결정했습니다: <br> <br><br><br><br><br>코드 복사</div> <p> 코드는 다음과 같습니다.</p> <p></p>if(screen.width>=1440) {<p>alert('와이드 스크린에서는 광고를 로드할 수 있습니다.');</p> <div class="codetitle">//일부 광고 코드<span>}<a style="CURSOR: pointer" data="83189" class="copybut" id="copybut83189" onclick="doCopy('code83189')"><u></u> </a>JS를 사용하여 다양한 해상도를 결정하고 다양한 CSS 스타일 파일 호출</span> </div>최근 한 웹사이트를 보다가 모니터 해상도에 따라 스타일 파일이 다르게 호출되는 것을 발견했습니다. 오늘은 이를 연구하기 위해 예제를 작성해 보았습니다. <div class="codebody" id="code83189"> <br><br><br><br>코드 복사<br> </div> 코드는 다음과 같습니다:<p></p> <p><!DOCTYPE HTML><br><html></p> <div class="codetitle"><head><span><meta charset="utf - 8"><a style="CURSOR: pointer" data="22710" class="copybut" id="copybut22710" onclick="doCopy('code22710')"><title>제목 없는 문서</title><u><link rel="stylesheet" id="sc" type="text/css" href="css/c1.css " /></u><script type="text/javascript"> </a>window.onload=function(){</span> var sc=document.getElementById("sc");</div> var d = document.getElementById("d");<div class="codebody" id="code22710"> if(screen.width>1024) //화면 너비 가져오기<br> {<br> sc.setAttribute("href","css/c2.css" ); //스타일 시트를 도입하기 위한 CSS 경로 설정 <br> d.innerHTML = "컴퓨터 화면 너비는 1024보다 크고, 내 화면 너비는 1200픽셀이며, 배경색은 이제 빨간색입니다.";<br> }<br> else{ <br><br> sc.setAttribute("href","css/c1.css");<br> d.innerHTML = "귀하의 컴퓨터 화면 너비는 1024보다 작거나 같고, 내 너비는 960px입니다. , 배경색 이제 파란색입니다. ";<br> }<br> }<br></script>








c1.css의 내용





코드 복사

코드는 다음과 같습니다.

*{ margin:0; ;}

div{ width:960px; height:400px; margin:0 auto; background:blue; color:#ffffff;} c2.css 내부 콘텐츠 *{ 여백:0;}
div{ 너비:1200px; 높이:400px; 여백:0 배경:#fff;}


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿