html屏幕自适应 js,js实现屏幕自适应局部代码分享

有小伙伴留言说需要一个js实现屏幕自适应局部的代码，这里简单整理了下，放出来给大家。

无标题文档

*{

margin:0;

padding:0;

list-style:none;

}

div{

margin:0 auto;

height:10000px;

min-width:880px;

max-width:1100px;

background:#060;

clear:both;

}

ul{}

li{

float:left;

display:inline;

width:198px;

height:198px;

border:1px solid #ccc;

margin:10px;

}

• 11111111111
• 2222222222
• 33333333333
• 4444444444
• 55555555555
• 666666666
• 77777777777
• 888888888888
• 999999999
• 00000000000

var winWidth;

window.οnlοad=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.οnresize=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";

}

试试看，是不是效果非常棒，希望大家能够喜欢。