친구는 화면 적응성을 구현하기 위해 JS에 로컬 코드가 필요하다는 메시지를 남겼습니다. 나는 여기에 그것을 컴파일하고 모든 사람을 위해 게시했습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<meta charset = "utf-8">
<title> 제목의 문서 </title>
<스타일>
*{
여백 : 0;
패딩 : 0;
목록 스타일 : 없음;
}
div {
여백 : 0 Auto;
높이 : 10000px;
최소값 : 880px;
최대 width : 1100px;
배경 :#060;
Clear : 둘 다;
}
ul {}
Li {
플로트 : 왼쪽;
디스플레이 : 인라인;
너비 : 198px;
높이 : 198px;
국경 : 1px Solid #CCC;
여백 : 10px;
}
</스타일>
</head>
<body>
<div id = "main">
<ul>
<li> 1111111111111 </li>
<li> 2222222222222 </li>
<li> 333333333333 </li>
<li> 4444444444444 </li>
<li> 55555555555555 </li>
<li> 6666666666 </li>
<li> 77777777777777777 </li>
<li> 8888888888888888 </li>
<li> 9999999999 </li>
<li> 0000000000000 </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<cript>
var winwidth;
Window.onload = function () {
if (window.innerWidth)
winwidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winwidth = document.body.clientWidth;
if (winwidth <= 1100)
document.getElementById ( "main"). style.width = "880px";
else if (winwidth> = 1100)
document.getElementById ( "main"). style.width = "1100px";
}
Window.onResize = function () {
if (window.innerWidth)
winwidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winwidth = document.body.clientWidth;
if (winwidth <= 1100)
document.getElementById ( "main"). style.width = "880px";
else if (winwidth> = 1100)
document.getElementById ( "main"). style.width = "1100px";
}
</스크립트>
</body>
</html>
시도해 봅시다. 효과가 아주 좋은가요? 나는 모두가 그것을 좋아하기를 바랍니다.