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

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

  

复制代码 代码如下:

  <!doctype html>

  <html>

  <head>

  <meta charset="utf-8">

  <title>无标题文档</title>

  <style>

  *{

  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;

  }

  </style>

  </head>

  <body>

  <div id="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>

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

  }

  </script>

  </body>

  </html>

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