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