js實現(xiàn)屏幕自適應局部代碼分享
更新時間:2015年01月30日 10:29:14 投稿:hebedich
這篇文章主要介紹了js實現(xiàn)屏幕自適應局部代碼分享,需要的朋友可以參考下
有小伙伴留言說需要一個js實現(xiàn)屏幕自適應局部的代碼,這里簡單整理了下,放出來給大家。
復制代碼 代碼如下:
<!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>
試試看,是不是效果非常棒,希望大家能夠喜歡。
您可能感興趣的文章:
相關文章
JS實現(xiàn)讀取xml內容并輸出到div中的方法示例
這篇文章主要介紹了JS實現(xiàn)讀取xml內容并輸出到div中的方法,涉及javascript針對xml格式數據的讀取、遍歷、輸出等相關操作技巧,需要的朋友可以參考下2018-04-04Javascript實現(xiàn)視頻文件播放功能(示例詳解)
這篇文章主要介紹了Javascript實現(xiàn)視頻文件播放功能,使用CSS完成相應的布局樣式,利用JavaScript函數來監(jiān)聽進度條,然后使用鼠標點擊按鈕實現(xiàn)對視頻的播放,需要的朋友可以參考下2023-10-10解決layui-table單元格設置為百分比在ie8下不能自適應的問題
今天小編就為大家分享一篇解決layui-table單元格設置為百分比在ie8下不能自適應的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript簡單實現(xiàn)動態(tài)改變HTML內容的方法示例
這篇文章主要介紹了JavaScript簡單實現(xiàn)動態(tài)改變HTML內容的方法,結合實例形式分析了javascript簡單獲取及修改HTML元素的相關操作技巧,非常簡單易懂,需要的朋友可以參考下2018-12-12uniapp自定義tabbar的方法(支持中間凸起、角標、動態(tài)隱藏tab和全端適用)
一個項目有多個角色,比如醫(yī)生和患者,tabBar跳轉的路徑不一樣,但是在pages.json中無法配置多個tabBar,這時候就要自定義tabBar了,下面這篇文章主要給大家介紹了關于uniapp自定義tabbar(支持中間凸起、角標、動態(tài)隱藏tab和全端適用)的相關資料,需要的朋友可以參考下2023-04-04JS面向對象基礎講解(工廠模式、構造函數模式、原型模式、混合模式、動態(tài)原型模式)
這篇文章主要介紹了面向對象JS基礎講解,工廠模式、構造函數模式、原型模式、混合模式、動態(tài)原型模式,需要的朋友可以參考下2014-08-08關于微信小程序獲取小程序碼并接受buffer流保存為圖片的方法
這篇文章主要介紹了關于微信小程序獲取小程序碼并接受buffer流保存為圖片的方法,文中通過示例代碼介紹的非常詳細,對大家學習或者使用小程序具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧<BR>2019-06-06