适配不同大小浏览器——固定排班
此文介绍的是缩小浏览器,排班不随浏览器窗口大小变化,如果需要排班随浏览器变化,使用bootstrap会更好,今天要介绍的是固定排班
加入JS代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<script language="javascript"> function readyPage() { if (screen.width >= 1600){ $(".content_container").width(1600); } else if ((screen.width >= 1400)&& (screen.width < 1600)){ $(".content_container").width(1400); //此分辨率下你需要的操作 } else if ((screen.width >= 1024)&& (screen.width < 1400)){ $(".content_container").width(1024); //此分辨率下你需要的操作 } else if ((screen.width >= 980)&& (screen.width < 1024)){ $(".content_container").width(980); //此分辨率下你需要的操作 } else { $(".content_container").width(800); //这个分辨率下你的操作 } } </script>
然后再body中,引入js,加入代码: onload="readyPage()"
还有一个方法,浏览器缩小的时候,排班不会随着他缩小而变化太大,但是,目前尝试,是能做到,在本机上全屏展示喔,在其他机器上,可能需要拖动进度条才能看到全屏.
content是我们需要展示的内容,在content前加一个父级div,如下:
<div class="container">
<div class="screenAdaptive">
content
</div>
</div>
对container的宽度,做处理如下:
.container {
width:100%;
height:100%;
margin:0 auto;
}
对content的父级,指定宽度:
.screenAdaptive{
width:1600px;
height:100%;
}
这种方法有局限性,后期如果有好的方法,再次来更新。