源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-06-15 14:41 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js实现屏幕自适应局部代码分享
有小伙伴留言说需要一个js实现屏幕自适应局部的代码,这里简单整理了下,放出来给大家。
[u]复制代码[/u] 代码如下:
<!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>
试试看,是不是效果非常棒,希望大家能够喜欢。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部