欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端自适应页面大小

程序员文章站 2022-03-04 17:55:12
...

前端自适应屏幕大小

<!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里面就行了，就可是实现百分比布局

上一篇： 用WPS将文档保存为图片将信息以图片格式发出防止复制

下一篇： vue获取图片原始宽高及渲染宽高

推荐阅读