gridview自适应宽度（webview自适应高度）

R语言数据分析来源：网络编辑：小编更新时间：2025-04-17 07:18:09 浏览量：43

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>数据大屏scale</title> </head> <style type="text/css"> /* 去除默认样式 */ * { margin: 0; padding: 0; } .container { width: 100wh; height: 100vh; background: orange; background: url(/Users/hoge/Desktop/code/vueStudy/硅谷甄选/admin_template/project/src/views/screen/images/bg.png) no-repeat; background-size: cover; } .box { width: 1920px; height: 1080px; background: red; transform-origin: left top; position: fixed; left: 50%; top: 50%; } .top { width: 100px; height: 100px; background: hotpink; margin-left: 50px; } .bottom { width: 100px; height: 100px; background: skyblue; margin-left: 50px; margin-top: 100px; } /* 放大缩小的倍数从设备的中心点开始进行放大 */ </style> <body> <!-- div box 为整个数据大屏的根节点，100vh 100wh的高度 --> <div class="container"> <!-- 数据展示的区域 --> <div class="box"> <div class="top">我是祖国的</div> <div class="bottom">老花骨朵</div>
        </div>
    </div>
</body>

</html>
<script>
    // 监控数据大屏的放大与缩小 let box = document.querySelector(".box"); box.style.transform = `scale(${getScale()}) translate(-50%)`; // 计算缩放的比例 function getScale(w = 1920, h = 1080) { // 屏幕的宽|高/设计稿的宽|高 const ww = window.innerWidth / w; const wh = window.innerHeight / h; return ww < wh ? ww : wh; } window.onresize = () => { box.style.transform = `scale(${getScale()}) translate(-50%)` } </script>

到此这篇gridview自适应宽度（webview自适应高度）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇： vb for语句循环（vb.net for循环语句）

下一篇：连接redis为啥不用写用户名（连接redis不需要用户名么）

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/30905.html

相关文章：