当前位置：前端ABC > Js与Jquery教程 > 正文

利用JS去做响应式布局

xiaoqi 发布于 2017-02-21
分类：Js与Jquery教程
评论(0)

HTML部分:

<!DOCTYPE html>
<html>
<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></
        <div></div>
        <div></div>
        <div></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);
});

欢迎分享本文，转载请保留出处：前端ABC » 利用JS去做响应式布局

标签：js 响应式

相关推荐

发表评论 0