前端自适应页面大小

最新推荐文章于 2024-05-23 14:30:20 发布

哆啦A梦的皮卡丘

最新推荐文章于 2024-05-23 14:30:20 发布

阅读量1.5k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41247642/article/details/97266254

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前端自适应屏幕大小

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <title>包装发运</title>
<#assign ctx = request.contextPath />


    <script type="text/javascript" src="${ctx}/ftl/common/jquery.min.js"></script>
    <script type="text/javascript" src="${ctx}/ftl/common/bootstrap.js"></script>
    <script type="text/javascript" src="${ctx}/ftl/common/table/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="${ctx}/ftl/common/table/bootstrap-table-locale-all.js"></script>

    <link rel="stylesheet" href="${ctx}/ftl/common/table/echart4.0.2/jquery-ui.min.css">
    <link rel="stylesheet" href="${ctx}/ftl/common/table/bootstrap.min.css">

<#--<!--echart引入 &ndash;&gt;-->
    <script src="${ctx}/ftl/common/table/echart4.0.2/echarts.min.js"></script>
    <script src="${ctx}/ftl/common/table/echart4.0.2/jquery.js"></script>
    <script src="${ctx}/ftl/common/table/echart4.0.2/jquery-ui.min.js"></script>
<#--bootstrap table-->
    <script type="text/javascript" src="${ctx}/ftl/common/table/bootstrap-table.js"></script>
    <link href="${ctx}/css/table/bootstrap-table.css" rel="stylesheet">
    <script type="text/javascript" src="${ctx}/ftl/common/table/bootstrap-table-zh-CN.js"></script>
    <script src="${ctx}/ftl/common/table/echart4.0.2/echarts-liquidfill.js"></script>
    <style>
        body {
            background-color: #050f32;
            scroll-padding: no;
        }

        #div {
            margin: 1%;
            width: 98%;
        }
    </style>

</head>
<body>
<div id="div">
    <script type="text/javascript">
        var clientHeight = document.documentElement.clientHeight;
        $("#div").css('height', clientHeight * 0.90 + 'px');//表格的高度
        $("#div").css('font-size', clientHeight * 30.0 / 626 + 'px');//主标题字体大小
        //        var titleFontSize=clientHeight*0.02;//标题的字体大小
        $("#titleLeft").css("font-size", clientHeight * 20.0 / 626);
        $("#titleImg").css({'height': clientHeight * 30.0 / 626, 'width': clientHeight * 50.0 / 626});
        //设置没有滚动条
        $("body").css({
            "overflow": 'hidden'
        });
    </script>
</div>
</body>

之后怎么排版都写到这个script下面 div里面就行了，就可是实现百分比布局

哆啦A梦的皮卡丘

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端自适应页面大小

前端自适应屏幕大小<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="descrip...
复制链接

扫一扫