关于大屏展示自适应的处理

原理：使用固定宽高(一般是16:9)的宽高比

然后使用缩放函数做自适应

放代码：

 mounted() {var setScale = (() => {const designWidth = 1920;const designHeight = 1080;const getBodyBaseStyle = `width: 1920; height: 1080; transform-origin: left top; overflow-x:hidden;`;return () => {const { innerWidth, innerHeight } = window;const scale = innerWidth / designWidth;document.body.style = `${getBodyBaseStyle}transform: scale(${scale})`;};})()window.addEventListener("load", () => {setScale();setTimeout(() => {document.body.style.setProperty("visibility", "visible");}, 0);})window.addEventListener("resize", () => {setScale();})// 获取公司+部门getDepartmentSelector().then(res => {this.departmentTreeData = res.data.list})setScale()},destroyed(){window.removeEventListener("load")window.removeEventListener("resize")},

关于大屏展示自适应的处理相关推荐

vue项目实现大屏展示自适应问题
vue项目实现大屏展示自适应问题此处的项目为vue2版本,因为该项目立项阶段未要求兼容大屏设备和移动端设备,原设计稿尺寸1920X1080像素,如何实现响应式布局. 一.安装 postcss-px ...
VUE 项目实现大屏展示的响应式
vue项目实现大屏展示自适应问题此处的项目为vue2版本,因为pc端的项目没有采用响应式自适应手机端的设计,所以使用lodash插件实现屏幕移动端自适应. 首先下载lodash插件. npm i ...
vue大屏展示高度自适应
vue大屏展示获取当前屏幕盖度 <template><div ref="bigshow"></div> &l ...
web大屏展示用到的组件_基于 HTML5 的工业组态高炉炼铁 3D 大屏可视化
前言在大数据盛行的现在,大屏数据可视化也已经成为了一个热门的话题.大屏可视化可以运用在众多领域中,比如工业互联网.医疗.交通.工业控制等等.将各项重要指标数据以图表.各种图形等形式表现在一个页面上, ...
扁平风轮播图大屏展示html页面源码
大家好,今天给大家介绍一款,扁平风轮播图大屏展示html页面源码(图1).送给大家哦,获取方式在本文末尾. 图1 可以点击图片区域进行图片轮播切换(图2) 图2 可以点击左右按钮进行图片轮播切换(图3 ...
html多图自动展示,基于echarts+html+css+jq的数据可视化大屏展示炫酷看板
默认你已经具备前端基础 html,css,js,jq这些基本知识都已经掌握. 什么是echarts? ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动 ...
基于js+echarts实现数据可视化大屏展示
vue+echarts大屏数据可视化展示点击进入写在前面: 本项目中使用的是echarts图表库,ECharts 提供了常规的折线图.柱状图.散点图.饼图.K线图,用于统计的盒形图,用于地理数据可视 ...
PowerBI 秒级实时大屏展示方案全面助力双十一
双十一来了,你准备好了吗?不管你是否准备完毕,我们带来了全网首发的 PowerBI 秒级实时大屏展示方案,你可以直接用来展示双十一的实时状况. 我们一步步来说明这个套件模板教程. 真实效果功能如下: ...
数据可视化、模板框架、动态控件、可视化大屏、数据监管、监控平台、图表元件库、数据看板、驾驶舱、统计图表、园区、大屏展示、安防、智慧城市、旅游、健康、医疗卫生、交通、农业、政务、AI、食品、医院、安全
数据可视化.模板框架.动态控件.可视化大屏.数据监管.监控平台.图表元件库.数据看板.驾驶舱.统计图表.园区.大屏展示.安防.智慧城市.旅游.健康.医疗卫生.交通.农业.政务.AI.食品.医院.数据安 ...

关于大屏展示自适应的处理

关于大屏展示自适应的处理相关推荐

最新文章

热门文章