本文提供一段完整的HTML与JavaScript代码示例，展示如何通过检测窗口宽度来动态调整页面主体容器的CSS宽度。当屏幕宽度小于等于1100像素时，主体宽度固定为880像素；当大于1100像素时，宽度扩展至1100像素。代码包含HTML结构、基础CSS样式及JS监听逻辑，适用于需要限制最大显示宽度并保持居中布局的场景。
JavaScript实现网页内容宽度自适应屏幕
针对有用户反馈需要实现网页局部内容随屏幕尺寸自动适配的需求，这里整理并分享一段简单的实现代码。
具体实现代码如下：
<!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>大家可以亲自测试一下，看看效果是否满意，希望这段代码能对大家有所帮助。