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

151 阅读 0 评论 100 点赞

我是靠谱客的博主难过冥王星，最近开发中收集的这篇文章主要介绍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>