常用的前端大屏 适配方案

news2025/1/13 10:17:33
方案实现方式优点缺点
vm vh1.按照设计稿的尺寸，将px按比例计算转为vw和vh1.可以动态计算图表的宽高，字体等，灵活性较高 2.当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况1.每个图表都需要单独做字体、间距、位移的适配，比较麻烦
scale1.通过 scale 属性，根据屏幕大小，对图表进行整体的等比缩放1.代码量少，适配简单2.一次处理后不需要在各个图表中再去单独适配 3.文字，图片等大小均能自动适配1.因为是根据 ui 稿等比缩放，当大屏跟 ui 稿的比例不一样时，会出现周边留白情况2.当缩放比例过大时候，字体会有一点点模糊，就一点点3.当缩放比例过大时候，事件热区会偏移。
插件v-scale-screen是使用 css 属性 transform 实现缩放效果的一个大屏自适应组件，通过 scale 进行等比例计算，达到等比例缩放的效果可以通过api调整原稿的宽高

方案一：vw vh

1.当屏幕正好为16：9的时候
在这里插入图片描述

2.当屏幕的尺寸比例大于 16:9 （左右拉长）
在这里插入图片描述

3.当屏幕的尺寸比例小于 16:9 时（左右变窄或者上下拉高）
在这里插入图片描述

实现方法：
css 方案 - sass
utils.scss

// 使用 scss 的 math 函数，https://sass-lang.com/documentation/breaking-changes/slash-div
@use "sass:math";
 
// 默认设计稿的宽度
$designWidth: 1920;
// 默认设计稿的高度
$designHeight: 1080;
 
// px 转为 vw 的函数
@function vw($px) {
  @return math.div($px, $designWidth) * 100vw;
}       
 
// px 转为 vh 的函数
@function vh($px) {
  @return math.div($px, $designHeight) * 100vh;
}
复制代码

路径配置只需在vue.config.js里配置一下utils.scss的路径，就可以全局使用了
vue.config.js

module.exports = {
	css: {
		loaderOptions: {
			sass: {
				prependData: `@import "@/assets/css/utils.scss";`
			}
		}
	},
}
在 .vue 中使用
<template>
    <div class="box">   
    </div>
</template>
 
<script>
export default{
    name: "Box",
}
</script>
 
<style lang="scss" scoped="scoped">
/* 
 直接使用 vw 和 vh 函数，将像素值传进去，得到的就是具体的 vw vh 单位   
 */
.box{
    width: vw(300);
    height: vh(100);
    font-size: vh(16);
    background-color: black;
    margin-left: vw(10);
    margin-top: vh(10);
    border: vh(2) solid red;
}
</style>

css 方案 - less

utils.less
@charset "utf-8";
// 默认设计稿的宽度
@designWidth: 1920;
// 默认设计稿的高度
@designHeight: 1080;
 
.px2vw(@name, @px) {
  @{name}: (@px / @designWidth) * 100vw;
}
 
.px2vh(@name, @px) {
  @{name}: (@px / @designHeight) * 100vh;
}
 
.px2font(@px) {
  font-size: (@px / @designWidth) * 100vw;
}

路径配置在vue.config.js里配置一下utils.less
<style lang="less" scoped="scoped">
/* 
 直接使用 vw 和 vh 函数，将像素值传进去，得到的就是具体的 vw vh单位   
 */
.box{
    .px2vw(width, 300);
    .px2vh(height, 100);
    .px2font(16);
    .px2vw(margin-left, 300);
    .px2vh(margin-top, 100);
    background-color: black;
}
</style>

定义 js 样式处理函数
// 定义设计稿的宽高
const designWidth = 1920;
const designHeight = 1080;
 
// px转vw
export const px2vw = (_px) => {
  return (_px * 100.0) / designWidth + 'vw';
};
 
export const px2vh = (_px) => {
  return (_px * 100.0) / designHeight + 'vh';
};
 
export const px2font = (_px) => {
  return (_px * 100.0) / designWidth + 'vw';
};

屏幕变化后，图表自动调整
这种使用方式有个弊端，就是屏幕尺寸发生变化后，需要手动刷新一下才能完成自适应调整

为了解决这个问题，你需要在各个图表中监听页面尺寸变化，重新调整图表，在 vue 项目中，也可以借助element-resize-detector，最好封装个 resize 的指令，在各图表中就只要使用该指令就可以了，毕竟作为程序员，能偷懒就偷懒。

解决方案一
1：安装 element-resize-detector

npm install element-resize-detector --save

2：封装成自定义指令使用

// directive.js
import * as ECharts from "echarts";
import elementResizeDetectorMaker from "element-resize-detector";
import Vue from "vue";
const HANDLER = "_vue_resize_handler";
function bind(el, binding) {
  el[HANDLER] = binding.value
    ? binding.value
    : () => {
        let chart = ECharts.getInstanceByDom(el);
        if (!chart) {
          return;
        }
        chart.resize();
      };
  // 监听绑定的div大小变化，更新 echarts 大小
  elementResizeDetectorMaker().listenTo(el, el[HANDLER]);
}
function unbind(el) {
  // window.removeEventListener("resize", el[HANDLER]);
  elementResizeDetectorMaker().removeListener(el, el[HANDLER]);
  delete el[HANDLER];
}
// 自定义指令：v-chart-resize 示例：v-chart-resize="fn"
Vue.directive("chart-resize", { bind, unbind });

3：main.js 中引入

import '@/directive/directive';

4：html 代码中使用

<template>
  <div class="linechart">
    <div ref="chart" v-chart-resize class="chart"></div>
  </div>
</template>

这里要注意的是，图表中如果需要 tab 切换动态更新图表数据，在更新数据时一定不要用 echarts 的 dispose 方法先将图表移除，再重新绘制，因为 resize 指令中挂载到的图表实例还是旧的，就监听不到新的 chart 元素的 resize 了，更新数据只需要用 chart 的 setOption 方法重新设置配置项即可。

解决方案二
1.在echarts中可以echarts.init(chatDom).resize()来解决宽高的自适应问题

		let chatDom = document.getElementById('main');
		let myChart = this.$echarts.init(chatDom);

		//根据父盒子的尺寸调整echarts的大小
		setTimeout(() => {
			window.addEventListener('resize', () => {
				this.$echarts.init(chatDom).resize();
			});
		}, 20);

2.在DataV中可以添加key来解决

<dv-water-level-pond :config="config2" :key="key" ref="pie2" />
data(){ 
   return {
   key: 1
   	}
  },
  	mounted() {
		this.pieOutlineFunc();
		},
  	methods: {
		pieOutlineFunc() {
			var _this = this;
			window.addEventListener('resize', function (e) {
				_this.$nextTick(() => {
					console.log(_this.$refs.pie2);
					_this.key++;
				});
			});
		}
	}

方案二：csale
通过 css 的 scale 属性，根据屏幕大小，用js监测屏幕的大小变化对图表进行整体的等比缩放，从而达到自适应效果
当屏幕的尺寸比例刚好是 16:9 时，页面能刚好全屏展示，内容占满显示器
在这里插入图片描述

当屏幕尺寸比例大于 16:9 时，上下左右留白，左右占满并居中，显示比例保持 16:9
在这里插入图片描述
当屏幕尺寸比例大于 16:9 时，页面左右留白，上下占满并居中，显示比例保持 16:9
在这里插入图片描述

代码
html

<template>
	<div class="screen-root">
		<div class="screen" id="screen">
			<div class="div1">
				<h1>11111111111</h1>
			</div>
			<div class="div2">
				<h1>2222222222</h1>
			</div>
			<div class="div3">
				<h1>3333333333</h1>
			</div>
		</div>
	</div>
</template>

js

<script>
export default {
	mounted() {
		// 初始化自适应  ----在刚显示的时候就开始适配一次
		this.handleScreenAuto();
		// 绑定自适应函数   ---防止浏览器栏变化后不再适配
		window.onresize = () => this.handleScreenAuto();
	},
	deleted() {
		window.onresize = null;
	},

	methods: {
		// 数据大屏自适应函数
		handleScreenAuto() {
			const designDraftWidth = 1920; //设计稿的宽度
			const designDraftHeight = 1080; //设计稿的高度
			// 根据屏幕的变化适配的比例
			const scale =
				document.documentElement.clientWidth / document.documentElement.clientHeight <
				designDraftWidth / designDraftHeight
					? document.documentElement.clientWidth / designDraftWidth
					: document.documentElement.clientHeight / designDraftHeight;
			// 缩放比例
			document.querySelector('#screen').style.transform = `scale(${scale}) translate(-50%,-50%)`;
			return 1;
		}
	}
};
</script>

css

<style lang="scss" scoped>
/*
  除了设计稿的宽高是根据您自己的设计稿决定以外，其他复制粘贴就完事
*/
h1 {
	color: red;
	font-size: 50px;
}
.screen-root {
	height: 100vh;
	width: 100vw;
	.screen {
		display: inline-block;
		width: 1920px; //设计稿的宽度
		height: 1080px; //设计稿的高度
		transform-origin: 0 0;
		position: absolute;
		left: 50%;
		top: 50%;
		border: 2px solid rgb(31, 210, 145);
		box-sizing: border-box;
		display: flex;
		.div1 {
			background-color: #fff;
			height: 100%;
			text-align: center;
			flex: 0 1 30%;
		}
		.div2 {
			background-color: rgb(133, 14, 14);
			height: 100%;
			text-align: center;
			flex: 0 1 40%;
		}
		.div3 {
			background-color: rgb(61, 6, 188);
			height: 100%;
			text-align: center;
			flex: 0 1 30%;
		}
	}
}
</style>

方案三：插件v-scale-screen
它其实也是通过 scale 进行等比例计算放大和缩小的，和方案二的原理是一样的，还可以通过api调整样式，源码地址和对应的API。
在这里插入图片描述

使用方法：
1.vue2请使用v-scale-screen@1.0.0版本，vue3请使用v-scale-screen@2.0.0版本

npm install v-scale-screen@1.0.0 -save
# or
yarn add v-scale-screen

2.使用-vue2中使用插件导入，vue3以组件导入

vue2
// main.js
import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)
组件内使用
//html
<v-scale-screen width="1920" height="1080" :boxStyle="boxStyle">
  <div>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
  </div>
</v-scale-screen>
//js
	data() {
		return {
			boxStyle: {
				backgroundColor: 'green'
			},
		}

vue3
<v-scale-screen width="1920" height="1080">
  <div>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
    <v-chart>....</v-chart>
  </div>
</v-scale-screen>
<script>
import VScaleScreen from 'v-scale-screen'
export default {
  components:{
    VScaleScreen
  }
}
</script>


———————————————
本文为CSDN博主「鲁少聚」的原创文章，遵循CC 4.0 BY-SA版
原文链接：https://blog.csdn.net/L1147484597/article/details/128443705

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/156440.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【寒假每日一题】AcWing 4509. 归一化处理

【寒假每日一题】AcWing 4509. 归一化处理

目录 一、题目 1、原题链接 2、题目描述 二、解题报告 1、思路分析 2、时间复杂度 3、代码详解 三、知识风暴 1、cmath头文件相关函数 2、cout大法 一、题目 1、原题链接 4509. 归一化处理 - AcWing题库 2、题目描述 在机器学习中&#xff0c;对数据进行归一化处理…
阅读更多...
【C++】list用法简单模拟实现

【C++】list用法简单模拟实现

文章目录1. list的介绍及使用1.1 list基本概念1.2 list的构造1.3 list的迭代器使用1.4 list 赋值和交换1.5 list 插入和删除1.6 list容量大小操作1.7 list 数据存取2. list的模拟实现这次要模拟实现的类及其成员函数接口总览2.1 结点类的实现2.2 迭代器的模拟实现2.3 反向迭代器…
阅读更多...
yolov1 论文精读 - You Only Look Once- Unified, Real-Time Object Detection-统一的实时目标检测

yolov1 论文精读 - You Only Look Once- Unified, Real-Time Object Detection-统一的实时目标检测

Abstract 我们提出了一种新的目标检测方法- YOLO。以前的目标检测工作重复利用分类器来完成检测任务。相反&#xff0c;我们将目标检测框架看作回归问题&#xff0c;从空间上分割边界框和相关的类别概率。单个神经网络在一次评估中直接从整个图像上预测边界框和类别概率。由于…
阅读更多...
PDF体积太大怎么缩小？这两种方法轻松解决

PDF体积太大怎么缩小？这两种方法轻松解决

在我们日常处理的文件中&#xff0c;PDF文件的体积已经算是比较小的文件了&#xff0c;但是随着工作时间增加&#xff0c;我们用到的PDF文件也越来越多&#xff0c;而且有些PDF文件的内容非常丰富&#xff0c;文件体积变得更大&#xff0c;这就不利于我们将文件传输给别人&…
阅读更多...
人脸检测算法模型MTCNN

人脸检测算法模型MTCNN

MTCNN，Multi-task convolutional neural network（多任务卷积神经网络），将人脸区域检测与人脸关键点检测放在了一起。总体可分为P-Net、R-Net、和O-Net三层网络结构。P-Net是快速生成候选窗口，R-Net进行高精度候选窗口的过滤和选择，O-Net是生成最终边界框和人脸关键点。该…
阅读更多...
使用JDK的 keytool 生成JKS，修改查看JKS信息

使用JDK的 keytool 生成JKS，修改查看JKS信息

什么是keytool keytool 是个密钥和证书管理工具。它使用户能够管理自己的公钥/私钥对及相关证书&#xff0c;在JDK 1.4以后的版本中都包含了这一工具&#xff0c;所以不用再上网去找keytool的安装&#xff0c;电脑如果安装有JDK1.4及以上&#xff0c;就可以直接使用。 第一步&…
阅读更多...
TOOM舆情分析网络舆情监控平台研究现状

TOOM舆情分析网络舆情监控平台研究现状

随着网络舆情迅速发展&#xff0c;国内的舆情监测行业也日渐完善&#xff0c;舆情监控平台在企业发展过程中发挥重要作用&#xff0c;但同样也是有问题存在的&#xff0c;接下来TOOM舆情分析网络舆情监控平台研究现状? 一、网络舆情监控平台 网络舆情监控平台是一种能够对网…
阅读更多...
maven概述以及简单入门

maven概述以及简单入门

目录 1、Maven概述 1.1、Maven是什么 1.2 依赖管理 1.3 maven管理资源存放地址 1.4 Maven的作用 2.Maven基础概念 2.1仓库概念 2.坐标概念 1、Maven概述 1.1、Maven是什么 在Javaweb开发中&#xff0c;需要使用大量的jar包&#xff0c;我们手动去导入&#xff1b; 如何…
阅读更多...
Mask RCNN网络源码解读（Ⅵ） --- 自定义数据集读取：MS COCOPascal VOC

Mask RCNN网络源码解读（Ⅵ） --- 自定义数据集读取：MS COCOPascal VOC

目录 1.如何在Mask R-CNN中读取有关COCO数据集的内容&#xff08;my_dataset_coco.py&#xff09; 1.1 CocoDetection类 1.1.1 初始化方法__init__ 1.1.2 __getitem__方法 1.1.3 parse_targets 2.如何在Mask R-CNN中读取有关Pascal VOC数据集的内容&#xff08;my_datas…
阅读更多...
docker搭建 java web服务

docker搭建 java web服务

安装 Docker 只需通过以下命令即可安装 Docker 软件&#xff1a; >> rpm -Uvh http://download.fedoraproject.org/pub/epel/6/i386/epel-release-6-8.noarch.rpm >> yum -y install docker-io可使用以下命令&#xff0c;查看 Docker 是否安装成功&#xff1a; …
阅读更多...
SpringMvc源码分析（一）：启动tomcat服务器,加载DispatcherServlet并将DispatcherServlet纳入tomcat管理

SpringMvc源码分析（一）：启动tomcat服务器,加载DispatcherServlet并将DispatcherServlet纳入tomcat管理

SpringMvc是主流的MVC框架&#xff0c;它是基于Spring提供的web应用框架&#xff0c;该框架遵循servlet规范。该框架的作用是接收Servlet容器&#xff08;如Tomcat&#xff09;传递过来的请求并返回响应。SpringMvc的核心就是servlet实例&#xff0c;而这个servlet在spring中就…
阅读更多...
IB地理科SL和HL课程的区别

IB地理科SL和HL课程的区别

今期我们会谈到IB地理科这一科目的标准级别&#xff08;StandardLevel&#xff0c;SL&#xff09;课程和高级级别&#xff08;HigherLevel&#xff0c;HL&#xff09;。 两课程的最大区别:试卷数目和题目数量的不同&#xff0c;但两者的教材内容和科目指引&#xff08;SubjectG…
阅读更多...
VTK-不同类型的数据集

VTK-不同类型的数据集

前言&#xff1a;本博文主要讲解vtk中不同类型的数据集以及它们之间的关系&#xff0c;如何进行转换等。 目录 vtkImageData vtkRectilinearGrid vtkStructuredGrid vtkUnstructuredPoints vtkPolyData vtkUnstructuredGrid vtkPolyData->vtkImageData vtkPolyData…
阅读更多...
Go反射学习

Go反射学习

文章目录反射介绍&#xff1a;反射应用点变量-空接口-reflect.Value&#xff08;Type)类型值方法结构体&#xff1a;反射修改变量值反射操作结构体MethodCall反射介绍&#xff1a; 反射是在运行时&#xff0c;动态的获取变量的各种信息&#xff0c;如变量的类型&#xff0c;类…
阅读更多...
Springboot中如何优雅的写好Service层代码

Springboot中如何优雅的写好Service层代码

前言《Springboot中如何优雅的写好controller层代码》一不小心进入了全站综合热榜&#xff0c;收到了大家热情的支持&#xff0c;非常感谢大家&#xff0c;同时说明大家都有同样一个诉求&#xff0c;想好好写代码&#xff0c;不想给别人挖坑&#xff0c;争取可以早点下班。今天…
阅读更多...
【Spring源码】CommonAnnotationBeanPostProcessor.postProcessMergedBeanDefinition()详解

【Spring源码】CommonAnnotationBeanPostProcessor.postProcessMergedBeanDefinition()详解

CommonAnnotationBeanPostProcessor的postProcessMergedBeanDefinition()中一共包含3个方法&#xff0c;上篇文章我们介绍了的第一个方法&#xff0c;它一个父类调用&#xff08;如下图&#xff09;&#xff0c;其实就是处理PostConstruct和PreDestroy这两个注解的这篇我们继续…
阅读更多...
一起聊聊数据治理

一起聊聊数据治理

统一赵秦车轨&#xff0c;推行秦篆&#xff0c;统一七国文字&#xff0c;兵器统一标准&#xff0c;统一度量衡… 我们优秀的数据治理专家-秦始皇&#xff01; 数据治理这个名字起得好&#xff0c;一般人听不懂&#xff0c;实际上并不是IT人员的专属&#xff0c;广义上来说我们日…
阅读更多...
纳米软件分享：为什么要进行电池充放电测试？电池充放电系统测试步骤

纳米软件分享：为什么要进行电池充放电测试？电池充放电系统测试步骤

在日常生活中电能一直是我们接触过的最为方便的能源&#xff0c;而我们也通过各种方法对电能进行储存从而让我们能随时随地的使用这种能源&#xff0c;比如手机中的锂电池、电动车中的充电电池等。 充电锂电池经过多年的技术革新&#xff0c;综合性能不断提升&#xff0c;已经应…
阅读更多...
基于node.js和Vue的食堂窗口美食评价系统/美食网站

基于node.js和Vue的食堂窗口美食评价系统/美食网站

摘要本论文主要论述了如何使用Node.js语言开发一个食堂窗口美食评价系统&#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论述食堂窗口美食评价系统的当前背景以及系…
阅读更多...
【高级人工智能】国科大《高级人工智能》联结主义 笔记 + 考试回忆

【高级人工智能】国科大《高级人工智能》联结主义 笔记 + 考试回忆

国科大《高级人工智能》吴老师部分——联结主义笔记 吴老师上课dddd&#xff0c;上课东西太多太杂&#xff0c;听不太懂比较煎熬&#xff0c;但是课后花点时间理解理解&#xff0c;还是挺有帮助的考试按照重点复习即可&#xff0c;虽然答疑时提到的传教士野人没考&#x1f605;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023