vue3 数据大屏处理1（vh-vm-rem）2（scale）数据大屏适配

前端小云儿

已于 2024-03-13 10:24:51 修改

阅读量564

点赞数

分类专栏： vue3知识点文章标签： javascript 前端开发语言

于 2024-03-13 10:24:35 首次发布

本文链接：https://blog.youkuaiyun.com/jieweiwujie/article/details/136610678

版权

vue3知识点专栏收录该内容

88 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文探讨了在Vue3中处理数据大屏适配的两种方法：1) 利用 vh 和 vm 单位进行计算调整；2) 应用 scale 缩放原理实现屏幕适配。这两种技术对于前端开发者在创建响应式大屏应用时极具参考价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 使用vh和vm 需要计算

2使用scale缩放原理

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>管理后台运营</title>
</head>
<style>
  .box {
    position: fixed;
    width: 1920px;
    height: 1080px;
    transform-origin: left top;
    left: 50%;
    top: 50%;
  }
</style>

<body>
  <div id="app" class="box"></div>
  <script type="module" src="/src/main.js">
  </script>
  <script>
    let box = document.queryS