js实现屏幕自适应局部代码分享
更新时间：2015年01月30日 10:29:14 投稿：hebedich
这篇文章主要介绍了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>
试试看，是不是效果非常棒，希望大家能够喜欢。
您可能感兴趣的文章:
相关文章
下面小编就为大家带来一篇Javascript的动态增加类的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要与大家分享了js使用for循环与innerHTML获取选中tr下td值的方法，很简单，但很实用，有需要的朋友可以参考下2014-09-09
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
这篇文章主要介绍了javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法即无法再次打开窗口、第二次打开不了,需要的朋友可以参考下2014-04-04
javascript setTimeout和setInterval计时的区别详解
window对象有两个主要的定时方法，分别是setTimeout 和 setInteval 他们的语法基本上相同，但是完成的功能取有区别。2013-06-06
这篇文章主要介绍了微信小程序实现发微博功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
这篇文章主要介绍了JS中正则表达式要注意lastIndex属性,需要的朋友可以参考下2017-08-08
这篇文章主要介绍了实时监测手部运动的 JS 库，可以实现很多有趣功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
在开发应用程序时,数组常用于存储多个元素（如数字、字符串、对象等）,然而,在某些场景下,你可能需要将数组清空,本文主要介绍了typescript 将数组清空的方法实现,感兴趣的可以了解一下2024-08-08
跟网上的一些常用的不太一样，个人都有个人常用的代码，大家看到好东西，不一定什么都会，起码要知道有这么个东西。方便以后用也方便找。2009-04-04
本文详细讲解了JS异步编程之Promise对象，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
最新评论