[JavaScript]利用JS去做响应式布局

来源：互联网发布：手机wilf上网关闭数据编辑：程序博客网时间：2024/06/10 23:43

HTML部分:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <link rel="stylesheet" href="./class/class.css">    <script src="./scripts/jquery.min.js"></script></head><body>    <div id="MainParent">        <div class="Navigation"></div>        <div class="Banner"></div>        <div class="Content"></div>        <div class="Footer"></div>    </div></body></html><script src="./scripts/resize.js"></script>

CSS部分：

@media screen{    #MainParent{float:left;width:100%;height:100%}    .Navigation{float:left;width:100%;height:40px;}    .Banner{float:left;width:100%;height:300px;}    .Content{float:left;}    .Footer{float:left;width:100%;height:40px;}}

JavaScript部分：

// 取浏览器可视区高宽var lw = $(window).width();var lh = $(window).height();// 页面加载完毕后执行$(function () {    // 加载完毕后设置body的高度和宽度    $(document.body).css({ "width": lw, "height": lh });    // 新的高度 = lh - (Navigation + Footer + Banner)    // 如果没有 Banner 可以不加    $(".Content").css("height", lh - 90);});// 当窗口高宽改变时触发$(window).resize(function () {    // 取窗口改变后的高度和宽度    var rw = $(window).width();    var rh = $(window).height();    // 重置body的高度和宽度    $(document.body).css({ "width": rw, "height": rh });    // 新的高度 = rh - (Navigation + Footer + Banner)    // 如果没有 Banner 可以不加    $(".Content").css("height", rh - 90);});

0 0