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

最新推荐文章于 2024-05-01 20:50:37 发布

「已注销」

最新推荐文章于 2024-05-01 20:50:37 发布

阅读量3.4k

点赞数

分类专栏：布局文章标签：响应式布局 html javascript

本文链接：https://blog.csdn.net/console_Upasaka/article/details/56280873

版权

布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
[JavaScript]利用JS去做响应式布局

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"></sc
复制链接

扫一扫