大屏适配方案一scale()

背景
在做大屏可视化项目的时候,一般设计稿会设计成1920 * 1080,但是页面写死1920 * 1080在2k、4k等分辨率的屏幕下是不适配的。

方案一:css3的缩放属性transform以及scale()
在做项目之前我们需要搞清楚客户的数据可视化平台需要在什么屏幕下展示,确定了实际屏幕比例,按照实际屏幕比例选择一个设计稿尺寸进行设计,设计稿出来后前端严格按照设计稿px进行开发页面即可。代码如下:
ScreenScale.vue

<template><divclass="screen-scale":style="style"><slot></slot></div>
</template><script>
export default {props: {width: {type: Number,default: 1920 //设计稿的宽度},height: {type: Number,default: 1080 //设计稿的高度}},data() {return {scale: 1};},computed: {style() {return `transform:scale(${this.scale}) translate(-50%, -50%);-ms-transform:scale(${this.scale}) translate(-50%, -50%); -moz-transform:scale(${this.scale}) translate(-50%, -50%); -webkit-transform:scale(${this.scale}) translate(-50%, -50%); -o-transform:scale(${this.scale}) translate(-50%, -50%); width:${this.width}px;height:${this.height}px;`;}},methods: {getScale() {//计算出缩放比let ww = window.innerWidth / this.width;let wh = window.innerHeight / this.height;this.scale = ww < wh ? ww : wh;}},mounted() {this.getScale();window.addEventListener('resize', this.getScale);},beforeDestroy() {window.removeEventListener('resize', this.getScale);}
};
</script><style scoped lang="less">
.screen-scale {transform-origin: 0 0;position: absolute;left: 50%;top: 50%;transition: 0.3s;overflow: hidden;
}
</style>

App.vue

<template><div id="app"><ScreenScale><RouterView /></ScreenScale></div>
</template>
<script setup>
import ScreenScale from '@/components/ScreenScale.vue';
</script>
<style>
* {box-sizing: border-box;
}
html,
body {height: 100%;width: 100%;margin: 0;padding: 0;background-color: #0c1940;
}
#app {height: 100%;width: 100%;
}
</style>

优点:此种方法的好处就是保证字体、图片等不被拉伸变形。’
缺点:在与设计稿比例不同的屏幕下会左右或者上下出现留白。

偷懒方法:v-scale-screen插件:Vue大屏自适应终极解决方案

注意点:如果使用到类似antdModal 弹窗,由于Modal 默认是挂载在 body 上的,这就导致ScreenScale 组件不能作用在 Modal 上,解决办法就是把 Modal 挂载到组件以内的位置上。参考:antdv Modal(对话框)指定挂载节点 demo

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

rocketMQ介绍

作用 流量削峰系统解耦 功能 普通消息 同步消息异步消息事务消息顺序消息延迟消息订阅与发布消息过滤消息消费重试死信队列...... 架构设计 1个broker是1台实例每个broker都有从节点&#xff0c;便于做故障转移每个broker对应一个文件&#xff0c;存储数据&#xff1f;还是…

PPOCRv3检测模型和识别模型的训练和推理

PPOCRv3检测模型和识别模型的训练和推理 文章目录 PPOCRv3检测模型和识别模型的训练和推理前言一、环境安装1&#xff0c;官方推荐环境&#xff1a;2&#xff0c;本机GPU环境 二、Conda虚拟环境1.Win10安装Anaconda32.使用conda创建虚拟环境 三、安装PPOCR环境1&#xff0c;安装…

数据可视化免费化的双面影响探析

近年来数据可视化的免费化也越来越明显&#xff0c;今天就以我作为可视化设计师的经验来和大家分析一下&#xff0c;数据可视化工具免费化所带来的利与弊。 先从好处入手&#xff0c;最明显的就是免费化可以让数据可视化工具得到更广泛的使用。 免费数据可视化工具使得更多人可…

生命在于折腾——使用PD打开OVA格式虚拟机

一、前言 下载了一个封装的工具箱虚拟机&#xff0c;格式是OVA的&#xff0c;PD无法直接打开&#xff0c;之前成功转换后打开过&#xff0c;但那时候没有记录&#xff0c;今天记录一下。 二、过程 有两种方法 1、去vmware官网下载工具VMware OVF Tool 地址&#xff1a;htt…

代码随想录算法训练营第四十二天 _ 动态规划_01背包问题、416.分割等和子集。

学习目标&#xff1a; 动态规划五部曲&#xff1a; ① 确定dp[i]的含义 ② 求递推公式 ③ dp数组如何初始化 ④ 确定遍历顺序 ⑤ 打印递归数组 ---- 调试 引用自代码随想录&#xff01; 60天训练营打卡计划&#xff01; 学习内容&#xff1a; 二维数组处理01背包问题 听起来…

大屏图表汇总echarts圆环

圆环效果示例 代码如下 storageStaChart() {let color [#009976,#15E6B5]let charts echarts.init(document.getElementById(storageStaChart));let option this.getPieOption(color);charts.setOption(option, true);}, getPieOption(color) {let data [];data.push({val…

Java高级技术-单元测试

单元测试 Junit单元测试框架 Junit单元测试-快速入门 方法类 测试类 Junit框架的基本注解

[Geek Challenge 2023] web题解

文章目录 EzHttpunsignn00b_Uploadeasy_phpEzRceezpythonezrfi EzHttp 按照提示POST传参 发现密码错误 F12找到hint&#xff0c;提示./robots.txt 访问一下&#xff0c;得到密码 然后就是http请求的基础知识 抓包修改 最后就是 我们直接添加请求头O2TAKUXX: GiveMeFlag 得到…

FPGA高端项目:UltraScale GTH + SDI 视频编解码,SDI无缓存回环输出,提供2套工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐我这里已有的 GT 高速接口解决方案我目前已有的SDI编解码方案 3、详细设计方案设计框图3G-SDI摄像头LMH0384均衡EQUltraScale GTH 的SDI模式应用UltraScale GTH 基本结构参考时钟的选择和分配UltraScale GTH 发送和接收处理流程UltraScale…

kali linux使用Proxmark3

其实kali linux下已经集成了Proxmark3命令&#xff0c;但是由于Proxmark3是开源设备&#xff0c;有时候系统默认安装的版本并不能很好的使用&#xff0c;因此需要手动编译最新的版本。 step 1 准备Proxmark3编译环境&#xff0c;因为kali linux比较激进&#xff0c;很多老旧的…

这书看着贼得劲儿

作者呕心沥血2年&#xff0c;再出力作~~~ 给大家推荐一本好玩的书 神经网络与TensorFlow 本来以为出版了第一本书&#xff0c;应该对于漫长的审核有免疫力了&#xff0c;结果又被这本书折磨了2年。于是作者痛定思痛&#xff0c;决定第三本书写一本纯科普的书籍。 墙裂推荐 这…

电力智慧运维系统

电力智慧运维系统是以提高用户侧电力运行安全&#xff0c;降低运维成本为目标&#xff1b;采用智能化运维管理工具—“电易云”&#xff0c;帮助企业建立电力运维体系全方位的信息化、数字化平台&#xff0c;实现设备运行的数字化在线监控与线下维护处理的有机融合&#xff0c;…

没错,数据库确实应该放入 K8s 里!

昨天冯老板发了一篇文章探讨了为什么将数据库放入 K8S 中不是一个明智的选择。 如果是四年前有人质疑容器化数据库我觉得还可以 battle 一下&#xff0c;都 2023 年了还有人不能认清这个大势&#xff0c;我就有必要来谈谈我的看法了。 我从 K8s 0.9 版本时就开始做这件事&…

离线环境下安装微软Visual Studio 2022 生成工具

1. 前言 最近&#xff0c;在学习cython的时候&#xff0c;需要安装windows下的C/C编译、链接工具。开始觉得传统的msvc太大了&#xff0c;想要尝试Mingw&#xff0c;但是都是编译错误。无奈之下&#xff0c;还是要安装msvc。 微软提供了Visual Studio 2022 Build Tools &…

多线程基础

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 多线程向来是面试的重灾…

OSPF/Open Shortest Path First

OSPF&#xff08;开放最短路径优先&#xff0c;Open Shortest Path First&#xff09;是一种内部网关协议&#xff08;IGP&#xff09;&#xff0c;用于在同一自治系统&#xff08;AS&#xff09;内的路由器之间交换路由信息。它是一个开放标准协议&#xff0c;设计用于支持复杂…

小中大女童穿搭 I 时尚百搭保暖性超赞

杜邦三防面料&#xff0b;超足充绒量 金属拉链&#xff0b;金属按扣&#xff0b;松紧下摆 可以说是将细节做到实处 防风保暖潮nice 经典宽松版型对身材包容性很强 后背和口袋两侧都做了 可调节抽绳&#xff0c;不会显得臃肿 很简单大方&#xff0c;搭配卫裤牛仔裤都好看…

推荐几款转换视频格式的好用转换工具,小白也能上手

视频格式转换工具是一种专门转换视频的软件&#xff0c;可让你将一种视频格式转换为另一种视频格式&#xff08;例如&#xff0c;MOV 到 MP4&#xff09;&#xff0c;通常可以节省空间。 本文将介绍一些用于转换视频格式的好用转换工具&#xff0c;并且详细描述了它们的主要功…

快速安装Axure RP Extension for Chrome插件

打开原型文件的html&#xff0c;会跳转到这个页面&#xff0c;怎么破&#xff1f; 我们点开产品设计的原型图如果没有下载Axure插件是打不开&#xff0c;而我们国内网通常又不能再google商店搜索对应插件&#xff0c;下面教大家如何快速安装 1、打开原型文件->resources-&g…

针对外协人员及用个人电脑办公源代码防泄密方案简述

现在在很多企业中有外协人员及员工用个人电脑办公的情况&#xff0c;这种设备是用个人的设备不是公司的电脑&#xff0c;如何对这些设备进行防泄密保护呢&#xff1f;首先我们要了解这种工作场景一个显著的特点是&#xff1a;办公司设备是个人的&#xff0c;公司的源代码加密后…