当前位置： 首页 > article >正文

大屏可视化适配方案

article 2024/9/24 6:19:08

大屏适配方案

  • 方案一：rem 单位 + 动态设置 html 的 font-size；
  • 方案二：vw 单位；
  • 方案三：scale 等比例缩放

对比

方案一

        核心思想：动态调整 HTML 根字体大小和 body 字体大小，结合百分比或vw/vh单位，实现容器宽高、字体大小、位移的动态适配。
        优点：基于比例缩放，能够灵活适应不同分辨率和屏幕尺寸。
        缺点：需要额外的计算和处理，可能增加开发复杂度。

方案二

        核心思想：通过将像素值（px）转换为视口宽度（vw）和视口高度（vh）来适配不同尺寸的屏幕，实时计算图表尺寸、字体大小等。
        优点：实时自适应不同屏幕大小，适合全屏应用。
        缺点：在极端分辨率下可能出现不可预期的布局问题。

方案三

        核心思想：根据屏幕宽高比例动态缩放，代码简洁，几行代码即可实现适配。
        优点：实现简单，特别适合基本的大屏展示场景。
        缺点：在地图、Canvas 等带有交互的组件中，可能会出现点击事件错位问题，需针对性调整。

方案1 – rem

  • 动态设置HTML根字体大小 和 body 字体大小（lib_flexible.js）
    • 将设计稿的宽（1920）平均分成 24 等份， 每一份为 80px。
    • HTML字体大小就设置为 80 px，即1rem = 80px， 24rem = 1920px
    • body字体大小设置为 16px。
    • 安装 cssrem 插件， root font size 设置为 80px。

      image.png

      image.png

    • 这个是px单位转rem的参考值 px 转 rem方式：手动 less/scss函数、cssrem插件、webpack插件、Vite插件

    • image.png

    • 接着就可以按照 1920px * 1080px 的设计稿愉快开发，此时的页面已经是响应式，并且宽高比不变

      image.png

lib_flexible.js 

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1
 
  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (16 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();
 
  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 24
    docEl.style.fontSize = rem + 'px'
  }
 
  setRemUnit()
 
  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })
 
  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

方案1 - rem

上面的方法是将页面等分并设置 1rem = 80px；

这个方案约定：将1920的基准字体大小设置为 14px，遇到其他尺寸自动按照与1920的比例对基准字体大小进行调整；并对 Echarts 进行处理；

useScreenAdapt.js

const FONT_SIZE = 14; // 基准字体大小

/**
 * 计算相对的像素值
 * @param {Number} size 像素值
 * @returns {Number}
 */
export function transform(size) {
  try {
    const htmlSize = document.documentElement.style.fontSize.match(/\d+/)[0] || FONT_SIZE;
    return (size * htmlSize) / FONT_SIZE;
  } catch (error) {
    return size;
  }
}

/**
 * 屏幕适配 hook
 */
export function useScreenAdapt() {
  onMounted(() => {
    let htmlContent = document.documentElement;

    htmlContent.style.fontSize = `${(window.innerWidth / 1920) * FONT_SIZE}px`;

    window.addEventListener("resize", () => {
      htmlContent.style.fontSize = `${(window.innerWidth / 1920) * FONT_SIZE}px`;
    });
  });
}

大屏页面 index.vue

<!-- 大屏 -->
<template>
  <div class="container">
    <headerDate />
    <leftPanel />
    <Map />
    <rightPanel />
  </div>
</template>
<script setup>
import leftPanel from "./components/leftPanel/index.vue";
import Map from "./components/jinjitan/index.vue";
import rightPanel from "./components/rightPanel/index.vue";
import headerDate from "./components/header/index.vue";
import { useScreenAdapt } from "./hooks/useScreenAdapt";

useScreenAdapt();
</script>
<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background: #333;
  position: relative;
}
</style>

样式使用 rem

 

对于 Echarts ，使用 transform 方法设置字体大小

参数：传入在1980屏幕下对应的字号大小

方案2 - vw

  • 屏幕的宽默认为 100vw，那么100vw = 1920px， 1vw = 19.2px 。
  • 安装 cssrem 插件， body的宽高（1920px * 1080px）直接把px单位转vw单位

    image.png

    • px 转 vw 方式：手动、less/scss函数、cssrem插件、webpack插件、Vite插件
  • 接着就可以按照 1920px * 1080px 的设计稿愉快开发，此时的页面已经是响应式，并宽高比不变。

    image.png

方案3 - scale

使用CSS3中的scale函数来缩放网页，这里我们将使用两种方案来实现：

  • 方案一：直接根据宽度的比率进行缩放。（宽度比率=网页当前宽 / 设计稿宽）
  • 方案二：动态计算网页宽高比，决定是是否按照宽度的比率进行缩放。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body, ul{
      margin: 0;
      padding: 0;
    }
    body{
      width: 1920px;
      height: 1080px;
      box-sizing: border-box;
      border: 3px solid red;

      /* 指定缩放的原点在左上角 */
      transform-origin: left top;
    }

    ul{
      width: 100%;
      height: 100%;
      list-style: none;

      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    li{
      width: 33.333%;
      height: 50%;
      box-sizing: border-box;
      border: 2px solid green;
      font-size: 30px;
    }
  </style>
</head>
<body>

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

  <script>
    // 设计稿:  1920 * 1080
    // 目标适配:  1920 * 1080   3840 * 2160 ( 2 * 2 ) ;  7680 * 2160( 4 * 2)

    // 1.设计稿的尺寸
    let targetX = 1920

    // 2.拿到当前设备(浏览器)的宽度
    let currentX = document.documentElement.clientWidth || document.body.clientWidth
    //  1920 * 1080  -> 3840 * 2160

    // 3.计算缩放比例
    let scaleRatio = currentX / targetX; // 参照宽度进行缩放

    // 4.开始缩放网页
    document.body.style = `transform: scale(${scaleRatio})`
  </script>
</body>
</html>

完美适配 3840 * 2160

image.png

此时有个问题出现了

  • 在7680*2160的屏幕下，出现了超出屏幕高度，出现了滚动条

    image.png

  • 为什么会出现这个问题
    • 因为我们使用scale进行缩放的时候 放大了四倍 1920x4= 7680 1080 x 4= 4320
    • 这个时候很明显1080高度无法放下4320高度所以出现了滚动条
  • 如何解决
    • 这个时候我们不能参照宽度进行缩放( 默认情况 )
    • 需要判断如果视口宽高比大于设计稿宽高比就参照高度进行缩放
    • 比如 3840 / 2160 > 1920 / 1080 就按照参照高度进行缩放 -js代码更改
  // 设计稿:  1920 * 1080
      // 目标适配:  1920 * 1080   3840 * 2160 ( 2 * 2 ) ;  7680 * 2160( 4 * 2)

      // 1.设计稿的尺寸
      let targetX = 1920;
      let targetY = 1080;
      let oldRatio = targetX / targetY;


      // 2.拿到当前设备(浏览器)的宽度
      let currentX =
        document.documentElement.clientWidth || document.body.clientWidth;
      let currentY =
        document.documentElement.clientHeight || document.body.clientHeight;
      //  1920 * 1080  -> 3840 * 2160

      // 3.计算缩放比例
      let scaleRatio = currentX / targetX; // 参照宽度进行缩放 ( 默认情况 )
      let currentRatio = currentX / currentY; // 宽高比率

      // 超宽屏
      if (currentRatio > oldRatio) {
        scaleRatio = currentY / targetY; // 参照高度进行缩放
        document.body.style = `width:${targetX}px; height:${targetY}px;transform: scale(${scaleRatio}) translateX(-50%); left: 50%`;
      } else {
        // 4.开始缩放网页
        document.body.style = `width:${targetX}px; height:${targetY}px; transform:           scale(${s  caleRatio})`;
      }

https://juejin.cn/post/7254200330493444151


http://www.kler.cn/news/302843.html

相关文章：

  • 前端数组迭代方法分析
  • 【深度学习】多层感知机的从零开始实现与简洁实现
  • 【RabbitMQ】概述
  • GitHub图床
  • docker 进程的概念
  • 【STM32系统】基于STM32设计的智能垃圾桶（语音、颜色识别、称重、光强、烟雾、人体识别、步进电机、水泵）——文末资料下载
  • android.database.sqlite.SQLiteException: no such table
  • MySQL之DQL子查询
  • Windows系统Docker部署AList并挂载阿里云盘实现远程访问详细教程——“cpolar内网穿透”
  • 双指针算法专题（1）
  • 大模型入门3:理解LLAMA
  • Windows10 如何配置python IDE
  • 从小白到高手：Windows注册表基础运维全攻略
  • Linux软件包循环依赖解决 彻底删除i386架构 更新软件源
  • nginx_shell脚本扩展配置虚拟主机三种方式
  • 为什么np.arrange(0.97,3.0,0.01)最后一个值是3.0018，大于3
  • Qt-常用控件（2）-按钮类和显示类
  • [概率论] 随机变量的分布函数 (一)
  • Spring Boot项目更改项目名称
  • 亲测可用导航网站源码分享 – 幽络源
  • Rust的常量
  • 云微客AI文案编写，有手就能出“爆款”
  • 【全网唯一中文】bt回测框架中文文档，不是backtrader！是bt
  • win11 MySQL的坑
  • Machine Learning: A Probabilistic Perspective 机器学习：概率视角 PDF免费分享
  • 手机TF卡格式化后数据恢复：方法、挑战与预防措施
  • 【Hot100】LeetCode—62. 不同路径
  • Flask中的上下文（Context）
  • apache文件共享和访问控制
  • 深入理解 Milvus：新一代向量数据库的基础技术与实战指南