js實現(xiàn)屏幕自適應(yīng)局部代碼分享
更新時間：2015年01月30日 10:29:14 投稿：hebedich
這篇文章主要介紹了js實現(xiàn)屏幕自適應(yīng)局部代碼分享,需要的朋友可以參考下
有小伙伴留言說需要一個js實現(xiàn)屏幕自適應(yīng)局部的代碼，這里簡單整理了下，放出來給大家。
復(fù)制代碼 代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</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>
試試看，是不是效果非常棒，希望大家能夠喜歡。
您可能感興趣的文章:
相關(guān)文章
Javascript的動態(tài)增加類的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫avascript的動態(tài)增加類的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
js使用for循環(huán)與innerHTML獲取選中tr下td值
這篇文章主要與大家分享了js使用for循環(huán)與innerHTML獲取選中tr下td值的方法，很簡單，但很實用，有需要的朋友可以參考下2014-09-09
javascript window.open打開新窗口后無法再次打開該窗口問題的解決方法
這篇文章主要介紹了javascript window.open打開新窗口后無法再次打開該窗口問題的解決方法即無法再次打開窗口、第二次打開不了,需要的朋友可以參考下2014-04-04
javascript setTimeout和setInterval計時的區(qū)別詳解
window對象有兩個主要的定時方法，分別是setTimeout 和 setInteval 他們的語法基本上相同，但是完成的功能取有區(qū)別。2013-06-06
微信小程序?qū)崿F(xiàn)發(fā)微博功能的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)發(fā)微博功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
這篇文章主要介紹了JS中正則表達(dá)式要注意lastIndex屬性,需要的朋友可以參考下2017-08-08
Handtrack.js庫實現(xiàn)實時監(jiān)測手部運動(推薦)
這篇文章主要介紹了實時監(jiān)測手部運動的 JS 庫，可以實現(xiàn)很多有趣功能,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
typescript 將數(shù)組清空的方法實現(xiàn)
在開發(fā)應(yīng)用程序時,數(shù)組常用于存儲多個元素（如數(shù)字、字符串、對象等）,然而,在某些場景下,你可能需要將數(shù)組清空,本文主要介紹了typescript 將數(shù)組清空的方法實現(xiàn),感興趣的可以了解一下2024-08-08
跟網(wǎng)上的一些常用的不太一樣，個人都有個人常用的代碼，大家看到好東西，不一定什么都會，起碼要知道有這么個東西。方便以后用也方便找。2009-04-04
本文詳細(xì)講解了JS異步編程之Promise對象，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06