当前位置: 首页 > news >正文

大屏适配方案一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

相关文章:

大屏适配方案一scale()

背景 在做大屏可视化项目的时候&#xff0c;一般设计稿会设计成1920 * 1080&#xff0c;但是页面写死1920 * 1080在2k、4k等分辨率的屏幕下是不适配的。 方案一&#xff1a;css3的缩放属性transform以及scale() 在做项目之前我们需要搞清楚客户的数据可视化平台需要在什么屏幕…...

WordPress免费插件大全清单【2023最新】

WordPress已经成为全球范围内最受欢迎的网站建设平台之一。要让您的WordPress网站更具功能性、效率性&#xff0c;并提供卓越的用户体验&#xff0c;插件的选择与使用变得至关重要。 WordPress插件的作用 我们先理解一下插件在WordPress生态系统中的作用。插件是一种能够为Wo…...

支付宝小程序接口传参会默认排序

一&#xff1a;问题 描述&#xff1a;最近项目中的接口都加了签名&#xff0c;在同步到支付宝小程序上时&#xff0c;发现有些接口报错&#xff0c;经过排查&#xff0c;导致报错的原因是因为传参顺序被支付宝小程序默认排序了&#xff0c;比如&#xff1a; 设置的原始参数&a…...

Numpy数组的运算(第7讲)

Numpy数组的运算(第7讲)         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ…...

node后端接口无法插入数据为emoji的表情的问题

原因 emoji的表情一般是这样的\xF0\x9F\x98\x80或者是\xF0\x9F\x98 &#xff0c;事实上 一般数据库的utf8的编码类型都是能保存\xF0\x9F\x98 但是不能保存\xF0\x9F\x98\x80这种样的emoji&#xff0c;要将数据库编码格式为utf8mb4 也就是utf8的超集 另外&#xff0c;除了 数据库…...

Conda常用命令总结

使用conda或anaconda的小伙伴们都知道&#xff0c;图形界面时不靠谱的&#xff0c;而在命令行下&#xff0c;所有的操作就会稳定很多&#xff0c;且极少出现问题。因此&#xff0c;熟记conda的命令行就变得十分有用。但对于我这样近50岁依旧奋斗在代码第一线的大龄程序员而已&a…...

Oracle数据库如何实现自增-序列Sequence介绍(适合小白)

Oracle数据库中的Sequence是一种特殊的数据库对象&#xff0c;可以生成一组等间隔的数值&#xff0c;常用于为表中的行自动生成序列号。也常用于主键自增的情况。 下面我将以小白的视角带大家介绍下Oracle数据库序列Sequence&#xff1a; 一、创建简单序列 创建简单序列语法…...

ke14--10章-2JDBC例子

驱动forName,创建连接对象getConnection要三个参数,执行String sql "INSERT INTO等",创建执行SQL语句的PreparedStatement对象进行setString,然后执行preStmt.executeUpdate(); 为什么要preStmt conn.prepareStatement(sql);conn DriverManager.getConnection(url…...

04数据平台Flume

Flume 功能 Flume主要作用&#xff0c;就是实时读取服务器本地磁盘数据&#xff0c;将数据写入到 HDFS。 Flume是 Cloudera提供的高可用&#xff0c;高可靠性&#xff0c;分布式的海量日志采集、聚合和传输的系统工具。 Flume 架构 Flume组成架构如下图所示&#xff1a; A…...

Redis--13--缓存一致性问题

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 缓存一致性问题1、先更新缓存&#xff0c;再更新DB方案二&#xff1a;先更新DB&#xff0c;再更新缓存方案三&#xff1a;先删缓存&#xff0c;再写数据库推荐1&…...

12.7作业

1. #include "mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(parent) {//***********窗口相关设置***********//设置窗体大小this->resize(540,410);this->setFixedSize(540,410);//取消菜单栏this->setWindowFlag(Qt::FramelessWindowHint);/…...

ssl什么是公钥和私钥?

公钥&#xff08;Public Key&#xff09;与私钥&#xff08;Private Key&#xff09;是通过加密算法得到的一个密钥对&#xff08;即一个公钥和一个私钥&#xff0c;也就是非对称加密方式&#xff09;。公钥可对会话进行加密、验证数字签名&#xff0c;只有使用对应的私钥才能解…...

github首次将文件合到远端分支,发现名字不是master,而是main

其中&#xff0c;暂存区和本地仓库的信息都存储在.git目录中 在自己的github上实践 1、刚开始&#xff0c;git clone gitgithub.com:lingze8678/my_github.git到本地 2、在克隆后的代码中加入一个pdf文件 3、在git bash中操作&#xff08;当项目中有文件更改和删除&#xff…...

RTX 40 系彻底摆烂,NVIDIA 让三年老卡焕发第二春

AMD 前段时间发布的 RX 6750GRE 12/10G 两块新卡属实给了市场一波小小震撼。 有同学要说了&#xff0c;这不就是两年前的 RX 6700 系换皮嘛&#xff0c;典型的旧饭重恰它凭啥能火&#xff1f; 无他&#xff0c;性能合格&#xff0c;价格实惠&#xff0c;主打一个高性价比。 别…...

ELK技术栈介绍及简单使用实例

1. ELK技术栈介绍 引言 在当今数据驱动的世界里&#xff0c;有效地管理和分析大量日志数据变得至关重要。这里我们将深入探讨ELK技术栈&#xff0c;这是一种流行的日志管理解决方案&#xff0c;它结合了三个开源项目&#xff1a;Elasticsearch、Logstash和Kibana。ELK技术栈因…...

基于Java健身房课程管理系统

基于Java健身房课程管理系统 功能需求 1、课程信息管理&#xff1a;系统需要能够记录和管理所有课程的详细信息&#xff0c;包括课程名称、教练信息、课程时间、课程地点、课程容量等。管理员和教练可以添加、编辑和删除课程信息。 2、会员信息管理&#xff1a;系统需要能够…...

DAPP开发【02】Remix使用

系列文章目录 系列文章在DAPP开发专栏 文章目录 系列文章目录使用部署测试网上本地项目连接remix本地项目连接remix 使用 创建一个新的工作空间 部署测试网上 利用metaMask连接测试网络 添加成功&#xff0c;添加时需要签名 即可进行编译 即可部署 本地项目连接remix 方…...

大华DSS S2-045 OGNL表达式注入漏洞复现

0x01 产品简介 大华DSS安防监控系统平台是一款集视频、报警、存储、管理于一体的综合安防解决方案。该平台支持多种接入方式,包括网络视频、模拟视频、数字视频、IP电话、对讲机等。此外,该平台还支持多种报警方式,包括移动侦测、区域入侵、越线报警、人员聚集等。 0x02 漏…...

大数据之HBase(二)

Master详细架构 位置&#xff1a;namenode实现类&#xff1a;HMaster组成 负载均衡器&#xff1a;通过meta了解region的分配&#xff0c;通过zk了解rs的启动情况&#xff0c;5分钟调控一次分配平衡元数据表管理器&#xff1a;管理自己的预写日志&#xff0c;如果宕机&#xff…...

前后端数据传输格式(下)

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 上篇主要复习了HTTP以及…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

【分享】推荐一些办公小工具

1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由&#xff1a;大部分的转换软件需要收费&#xff0c;要么功能不齐全&#xff0c;而开会员又用不了几次浪费钱&#xff0c;借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

springboot 日志类切面,接口成功记录日志,失败不记录

springboot 日志类切面&#xff0c;接口成功记录日志&#xff0c;失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...

路由基础-路由表

本篇将会向读者介绍路由的基本概念。 前言 在一个典型的数据通信网络中&#xff0c;往往存在多个不同的IP网段&#xff0c;数据在不同的IP网段之间交互是需要借助三层设备的&#xff0c;这些设备具备路由能力&#xff0c;能够实现数据的跨网段转发。 路由是数据通信网络中最基…...

qt+vs Generated File下的moc_和ui_文件丢失导致 error LNK2001

qt 5.9.7 vs2013 qt add-in 2.3.2 起因是添加一个新的控件类&#xff0c;直接把源文件拖进VS的项目里&#xff0c;然后VS卡住十秒&#xff0c;然后编译就报一堆 error LNK2001 一看项目的Generated Files下的moc_和ui_文件丢失了一部分&#xff0c;导致编译的时候找不到了。因…...

SpringCloud优势

目录 完善的微服务支持 高可用性和容错性 灵活的配置管理 强大的服务网关 分布式追踪能力 丰富的社区生态 易于与其他技术栈集成 完善的微服务支持 Spring Cloud 提供了一整套工具和组件来支持微服务架构的开发,包括服务注册与发现、负载均衡、断路器、配置管理等功能…...