前端自适应页面大小

最新推荐文章于 2022-09-20 15:49:43 发布
最新推荐文章于 2022-09-20 15:49:43 发布
阅读量1.5k 收藏 3
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41247642/article/details/97266254
版权

前端自适应屏幕大小

<!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
    评论
专栏目录
Unity：WEB端发布后运行时窗口自适应浏览器窗口大小（网页内全屏）
05-03
整体来说我们需要修改两个文件，第一个index.html、第二个是TemplateData文件夹下的 style.css文件。 压缩包内有修改前与修改后的内容。可参考修改！！！ 下面是文章修改链接具体修改可供参考： https://blog.csdn.net/weixin_43392473/article/details/124553861
前端页面如何自适应--4种方法
最新发布
一步一个脚印，踏实努力，向着目标前进
10-29 6586
前端页面有很多方法可以实现。这里我将介绍五种常用的方法，并提供相应的代码示例。
自适应的前端页面
Hello_Jay66的博客
02-23 255
PC端 1.用js计算 1rem = html之font-size 根据设计图 1366宽 html设置100px 100px的元素==1rem 比如实际浏览器 2732 宽 同样设置1rem ，那根元素要设置多少，使俩者比例一致 1366:100=2732:x 得x=200 html设置font-size=200px 而其他元素设置的rem不用变化 每个单位大小用实际值除以100得到相对的re...
HTML 图像（十二）
mzoy的专栏
07-28 498
  图像标签（）和源属性（Src）在 HTML 中，图像由 标签定义。 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。定义图像的语法是：URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 i
高度塌陷和高度自适应
xiaokangna的博客
05-20 390
一、宽度自适应：width 1、在页面布局中如果“块级元素”设置宽度为100%或者不设置的情况下 ，宽度默认自适应到整个屏幕宽度（通拦效果） 2、块级元素不设置宽度的时候，就会和父级盒子宽度相同 3、重点：如果当前元素脱离了文档流，元素的宽度由内容决定=>如果元素设置了浮动或者定位一定要给元素添加宽高大小，（给元素设置脱离文档流之前就一定要给元素设置宽高大小，不然就会看不见。 二、高度自适应：height 1、当元素不设置高度的时候，就没有内容，在浏览器中就会不显示 2、当元素不设置高
右边固定宽度，左边自适应宽度
前端小菜
11-23 534
1、左边左浮动，margin-left负值，右边右浮动 Document *{ margin: 0; padding: 0; } .left{ float: left; width: 100%; height: 300px; background: #000; margin-right: -200px; font-size: 40px;
前端自适应适配规则
小菜鸟的博客
03-26 3521
前端自适应适配规则 看了很多博客写的很乱讲的很官方，因此在这里我稍微提起一点 首先通用文件适配器 等于屏幕宽度除以设计搞宽度*100除以16 在这里我一个一个解释 首先1.屏幕宽度等于你当前的屏幕宽度 2.设计搞宽度取决与你的ui宽度 ，我的ui给我的是640px 3.乘以100 很多人就很离谱这个都不解释，你还写个锤子博客，100是你的基准值，也就是你使用的切图工具的基准值，一般这个是可以自己设置的不是死的，打个比方，ui给你的设计搞是640px，设置基准值为100之后应该是6.4rem 4.除以16就
手机端页面rem宽度自适应脚本
12-10
根据手机宽度改变相对大小就可以实现自适应了，就不用什么媒体查询那些的。 我们的设计图往往宽度是640或者其他尺寸的，不过我建议是用这个尺寸，以640为基准，以小到大，实现自适应，下面实现的比例为1rem=40px(640...
C#利用GDI+给图片添加文字（文字自适应矩形区域）
01-20
因为前端的字体大小单位与后端没什么关系，所以不能直接传字体大小，也就是后端要根据矩形区域以及文字内容来自己推算用什么样的字体大小合适。 简单说就是知道文字的矩形区域，以及文字内容，要让文字内容根据矩形...
浏览器自适应窗口
08-07
可以根据浏览器窗口大小来调整内容，适合手机开发
\ASP.NET实现自适应图片大小的弹出窗口(窗口可任意编辑).doc
09-05
\ASP.NET实现自适应图片大小的弹出窗口(窗口可任意编辑).doc
web前端自适应方案总结
ybbnzs的博客
09-20 562
web前端自适应方案简单总结
Web前端：自适应居中方法总结
Mrs_Wu的博客
10-15 3199
最近看到了一位大牛写的一个小的前端动画的代码，body中出现了一种最新的网页自适应居中的方法，结合以前在公众号中看到的一篇文章，在这里对网页自适应居中方法做个小小的总结：1、这是一种简单的方法，但是稍有局限性，设定了盒子的宽高 2、这种方法不需要计算，盒子的宽高也不影响，但是IE7及以下的浏览器并不支持3、table布局，display:table-cell，将整个界面模拟成一个表格单元格，表格的
bootstrap table组件实现点击行 在行下面展示数据列表
做你的时光机的博客
04-02 6480
工作遇到这个样一个需求类似于下面，当我点击2这一行的加号时，在当前行之后添加详细数据列表 但是 这个数据我个人当时考虑的时候首先考虑做成tree 但是奈何个人技术不行 用不了bootstrap table的树组件，无法定义这个数据的PID以及CID，这里的子列表是子ID中是否包含父ID来查找的，所以当时就没有用tree来解决 后来找到bootstrap table 的官网...
bootstrap-table-filter实现后台过滤，不使用源码的前端过滤
做你的时光机的博客
07-25 6163
首先引入所需的css和js <link href="${ctx}/ftl/common/table/filter-control/bootstrap-table-filter-control.css" rel="stylesheet"> <script type="text/javascript" src="${ctx}/ftl/common/ta...
bootstrap table 插件滚动条到底自动加载下一页的瀑布流实现
做你的时光机的博客
11-12 5281
最近项目做一个需要滚动条加载下一页的功能，做了一个简单的实现，具体方法如下： 首先，定义变量 //当前页 var currentPage = 1; //总页数 var totalPage = 0; 然后初始化bootstrap table从后台获取总页数，下方代码是放到初始化bootstrap table中的 //处理响应数据 responseHandler: ...
bootstrap table列点击事件
做你的时光机的博客
11-12 3373
在列属性定义： events: 'operateEventsOrderno', 在js中定义点击事件： /** * 查看进度 * @type {{click #jd: Window.operateEventsJd.click #jd}} */ window.operateEventsJd = { 'click #jd': functi...
后台传map，前台用bootstrapTable接收数据和用ajax接收数据
做你的时光机的博客
11-12 1343
使用bootstrap table插件要使用关键字responseHandler来处理后台的返回数据。 这里用map作为示例： $("#tb_departments").bootstrapTable({ url: 'queryPrecisionCastDetail.z', method: 'post', contentT...
写一个能够自适应页面大小的聊天室前端代码模板
09-16
### 回答1： 为了写一个能够自适应页面大小的聊天室前端代码模板，可以使用CSS媒体查询来实现响应式设计，以便能够根据页面的大小来自动调整布局和大小。 以下是一个简单的代码模板： ``` <style> body { margin: 0; width: 100%; overflow-x: hidden; } #chatroom { width: 100%; max-width: 500px; } @media screen and (max-width: 500px) { #chatroom { width: 100%; } } </style><div id="chatroom"> <!-- Your chatroom code goes here --> </div> ``` ### 回答2： 聊天室前端代码模板可采用以下方式实现页面自适应大小： 1. HTML结构： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>聊天室</title> <style> #chat-container { display: flex; flex-direction: column; height: 100vh; } #chat-messages { flex: 1; overflow-y: auto; } #input-area { display: flex; justify-content: center; align-items: center; padding: 10px; } #input-area input { width: 80%; height: 30px; } </style> </head> <body> <div id="chat-container"> <div id="chat-messages"> <!-- 聊天消息显示区域 --> </div> <div id="input-area"> <input type="text" id="input-message" placeholder="请输入消息内容"> <button id="send-button">发送</button> </div> </div> <script src="script.js"></script> </body> </html> ``` 2. CSS样式： 上述HTML结构中的样式设置实现了聊天室页面的自适应大小效果。 - `#chat-container`使用了flex布局，容器高度设置为100vh，即占据整个可视区域的高度。 - `#chat-messages`设置为flex: 1，表示自动占据剩余空间，并将超出容器高度的内容进行滚动显示。 - `#input-area`使用了flex布局，内容居中显示，并添加了一定的内边距。 - `#input-area input`设置了宽度为80%，高度为30px。 3. JavaScript交互： 在script.js文件中，可以通过获取页面元素和添加事件监听器等方式实现聊天室的功能。 ```javascript window.onload = function() { var sendButton = document.getElementById("send-button"); var inputMessage = document.getElementById("input-message"); var chatMessages = document.getElementById("chat-messages"); sendButton.addEventListener("click", function() { var messageText = inputMessage.value; var messageElement = document.createElement("div"); messageElement.textContent = messageText; chatMessages.appendChild(messageElement); inputMessage.value = ""; }); }; ``` 在以上JavaScript代码中，获取了发送按钮、输入框和聊天消息显示区域的元素，并对发送按钮的"click"事件进行监听。当点击发送按钮时，获取输入框中的文本内容，创建一个div元素用于显示消息，并将其添加到聊天消息显示区域的末尾。之后，清空输入框的内容，以便继续输入下一条消息。 通过以上HTML、CSS和JavaScript的组合实现，聊天室前端代码模板就能够自适应页面大小，并具备了基本的消息发送和显示功能。 ### 回答3： 要实现一个能够自适应页面大小的聊天室前端代码模板，我们可以运用一些HTML、CSS和JavaScript的知识。以下是一个简单的代码模板： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自适应聊天室</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } #chatroom { width: 100%; height: 100vh; display: flex; flex-direction: column; } #message-container { flex: 1; overflow-y: scroll; padding: 10px; } #input-container { display: flex; padding: 10px; } #input-field { flex: 1; margin-right: 10px; padding: 5px; } #send-button { padding: 5px 10px; background-color: #007bff; color: white; border: none; } </style> </head> <body> <div id="chatroom"> <div id="message-container"></div> <div id="input-container"> <input type="text" id="input-field" placeholder="请输入消息..."> <button id="send-button">发送</button> </div> </div> <script> // 获取DOM元素 const messageContainer = document.getElementById('message-container'); const inputField = document.getElementById('input-field'); const sendButton = document.getElementById('send-button'); // 监听发送按钮点击事件 sendButton.addEventListener('click', () => { const message = inputField.value; // 发送消息逻辑... // 清空输入框 inputField.value = ''; }); // 监听输入框回车键事件 inputField.addEventListener('keyup', (event) => { if (event.keyCode === 13) { sendButton.click(); } }); // 渲染接收到的消息 function renderMessage(message) { const messageElement = document.createElement('div'); messageElement.innerText = message; messageContainer.appendChild(messageElement); messageContainer.scrollTop = messageContainer.scrollHeight; } // 接收到消息后的处理逻辑... </script> </body> </html> ``` 上述代码中，我们将聊天窗口容器`#chatroom`设置为占据整个页面，并使用`display: flex;`实现了竖直方向的布局。消息容器`#message-container`使用`flex: 1;`将剩余空间填充，并设置了滚动条样式。输入框和发送按钮也进行了相应的布局设置。 通过JavaScript，我们可以监听发送按钮点击事件和输入框回车键事件，实现消息的发送和回车发送功能。此外，还提供了一个`renderMessage`函数用于渲染接收到的消息，并保持消息滚动条自动滚动到最底部。 该代码模板可以根据不同的页面大小自适应调整布局，并提供基本的聊天室交互功能。当接收到新消息时，滚动条也会相应地自动滚动到最底部，确保用户始终可以看到最新的消息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值