js实现屏幕自适应局部代码分享
有小伙伴留言说需要一个js实现屏幕自适应局部的代码,这里简单整理了下,放出来给大家。
<!doctypehtml> <html> <head> <metacharset="utf-8"> <title>无标题文档</title> <style> *{ margin:0; padding:0; list-style:none; } div{ margin:0auto; height:10000px; min-width:880px; max-width:1100px; background:#060; clear:both; } ul{} li{ float:left; display:inline; width:198px; height:198px; border:1pxsolid#ccc; margin:10px; } </style> </head> <body> <divid="main"> <ul> <li>11111111111</li> <li>2222222222</li> <li>33333333333</li> <li>4444444444</li> <li>55555555555</li> <li>666666666</li> <li>77777777777</li> <li>888888888888</li> <li>999999999</li> <li>00000000000</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> <script> varwinWidth; window.onload=function(){ if(window.innerWidth) winWidth=window.innerWidth; elseif((document.body)&&(document.body.clientWidth)) winWidth=document.body.clientWidth; if(winWidth<=1100) document.getElementById("main").style.width="880px"; elseif(winWidth>=1100) document.getElementById("main").style.width="1100px"; } window.onresize=function(){ if(window.innerWidth) winWidth=window.innerWidth; elseif((document.body)&&(document.body.clientWidth)) winWidth=document.body.clientWidth; if(winWidth<=1100) document.getElementById("main").style.width="880px"; elseif(winWidth>=1100) document.getElementById("main").style.width="1100px"; } </script> </body> </html>
试试看,是不是效果非常棒,希望大家能够喜欢。