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

VUE如何使得大屏自适应的几种方法?

VUE学习大屏自适应的几种方法

1.自适屏幕,始终保持16:9的比例

<!-- 大屏固定比例16:9自适应   -->
<template><div class="container"><div class="content" :style="getAspectRatioStyle"><!-- 数据展示内容 --></div></div></template><script setup lang="ts">import { ref, onMounted, onBeforeUnmount, computed } from 'vue';const contentWidth = ref(0);const contentHeight = ref(0);const calculateAspectRatio = () => {const container = document.querySelector('.container');// const containerWidth = container.offsetWidth;const containerWidth: number = (<HTMLElement>container).offsetWidth;// const containerHeight = container.offsetHeight;const containerHeight: number = (<HTMLElement>container).offsetHeight;const aspectRatio = 16 / 9; // 16:9 比例const containerAspectRatio = containerWidth / containerHeight;if (containerAspectRatio > aspectRatio) {// 以高度为基准,按比例计算宽度contentHeight.value = containerHeight;contentWidth.value = Math.floor(containerHeight * aspectRatio);} else {// 以宽度为基准,按比例计算高度contentWidth.value = containerWidth;contentHeight.value = Math.floor(containerWidth / aspectRatio);}console.log('contentWidth',contentWidth.value)console.log('contentHeight',contentHeight.value)};onMounted(() => {calculateAspectRatio();window.addEventListener('resize', calculateAspectRatio);});onBeforeUnmount(() => {window.removeEventListener('resize', calculateAspectRatio);});const getAspectRatioStyle = computed(() => ({width: `${contentWidth.value}px`,height: `${contentHeight.value}px`,margin: 'auto',background: 'gray'}));</script><style>.container {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}.content {/* 根据计算得到的宽高样式设置 */}</style>

2.使用CSS scale属性对大屏幕做自适应处理

<template>
<div class="login-container"><div class="login-main" ref="dataScreenRef"></div>
</div></template>
<script setup>
const dataScreenRef = ref(null);
const width = 1920;
const height = 1080;// 根据浏览器大小推断缩放比例
// 首先要确定设计稿尺寸,默认是 1920 x 1080
// 分别计算浏览器和设计图宽高比
// 如果浏览器的宽高比大于设计稿的宽高比,就取浏览器高度和设计稿高度之比
// 如果浏览器的宽高比小于设计稿的宽高比,就取浏览器宽度和设计稿宽度之比
const getScale = (w = width, h = height) => {let ww = window.innerWidth / w;let wh = window.innerHeight / h;return ww < wh ? ww : wh;
};
/* 浏览器监听 resize 事件 */
const resize = () => {if (dataScreenRef.value) {dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;}
};onMounted(() => {// 初始化时为外层盒子加上缩放属性,防止刷新界面时就已经缩放if (dataScreenRef.value) {dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;dataScreenRef.value.style.width = `${width}px`;dataScreenRef.value.style.height = `${height}px`;}window.addEventListener("resize", resize);
});</script>
<style scoped lang="scss">
.login-container {width: 100%;height: 100%;transform-origin: 0 0;position: relative;
}
.login-main {width: 100%;height: 100%;position: absolute;
}</style>

3.使用rem

(1)npm下载插件,自动将px单位转换成rem单位
npm install postcss-px2rem --save
(2)在根目录src中新建util目录下新建rem.js等比适配文件
// rem等比适配配置文件
// 基准大小
const baseSize = 14
// 设置 rem 函数
function setRem () {// 当前页面宽度相对于 1920宽的缩放比例,可根据自己需要修改。const scale = document.documentElement.clientWidth / 1920// 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 `rem`
window.onresize = function () {setRem()
}
(3)在main.js中引入适配文件
import './util/rem'
(4)到vue.config.js中配置插件
 
// 引入等比适配插件
const px2rem = require('postcss-px2rem')// 配置基本大小
const postcss = px2rem({// 基准大小 baseSize,需要和rem.js中相同// remUnit: 14 代表 1rem = 14px; 所以当你一个14px值时,它会自动转成 (14px/14)remremUnit: 14
})// 使用等比适配插件
module.exports = {lintOnSave: true,css: {loaderOptions: {less: {javascriptEnabled: true,},postcss: {plugins: [postcss,],},},},
}

相关文章:

VUE如何使得大屏自适应的几种方法?

VUE学习大屏自适应的几种方法 1.自适屏幕&#xff0c;始终保持16:9的比例 <!-- 大屏固定比例16&#xff1a;9自适应 --> <template><div class"container"><div class"content" :style"getAspectRatioStyle"><!-- …...

API接口安全运营研究(内附官方开发平台api接口接入方式)

摘 要 根据当前API技术发展的趋势&#xff0c;从实际应用中发生的安全事件出发&#xff0c;分析并讨论相关API安全运营问题。从风险角度阐述了API接口安全存在的问题&#xff0c;探讨了API检测技术在安全运营中起到的作用&#xff0c;同时针对API安全运营实践&#xff0c;提出…...

信钰证券:股票交易费用计算方法?

股票生意是股市参加者之间进行的买入和卖出股票的进程。其中&#xff0c;股票生意费用是参加股市生意的重要组成部分。本文将从多个视点分析股票生意费用计算方法。 首先&#xff0c;股票生意费用一般包含三部分。分别是佣钱、印花税和过户费。佣钱是证券公司为代理股票生意而收…...

通过js获取用户网络ip地址

<!DOCTYPE html> <html><head><meta charset"utf-8"><title>js获取本地ip</title> </head><body><script>var xmlhttp;if (window.XMLHttpRequest) {xmlhttp new XMLHttpRequest();} else {xmlhttp new Act…...

微信小程序wxml使用过滤器

微信小程序wxml使用过滤器 1. 新建wxs2. 引用和使用 如何在微信小程序wxml使用过滤器&#xff1f; 犹如Angular使用pipe管道这样子方便&#xff0c;用的最多就是时间格式化。 下面是实现时间格式化的方法和步骤&#xff1a; 1. 新建wxs 插入代码&#xff1a; /*** 管道过滤工…...

内网渗透面试问题

文章目录 1、熟悉哪些域渗透的手段2、详细说明哈希传递的攻击原理NTLM认证流程哈希传递 3、聊一下黄金票据和白银票据4、shiro反序列化漏洞的形成原因&#xff0c;尝试使用burp抓包查看返回包内容安装环境漏洞验证 5、log4j组件的命令执行漏洞是如何造成的6、画图描述Kerberos协…...

Go语言函数进阶:值传递、引用传递、函数式编程

文章目录 值传递和引用传递闭包柯里化defer go语言教程&#xff1a; 安装入门➡️ for循环➡️ 数组、切片和指针➡️ switch和map 值传递和引用传递 go语言中&#xff0c;函数通过关键字func定义&#xff0c;对于传入和返回的参数需要做类型的定义&#xff0c;其返回值可…...

数据结构 堆——详细动画图解,形象理解

作者主页 &#x1f4da;lovewold少个r博客主页 ​➡️栈和队列博客传送门 &#x1f333;参天大树充满生命力&#xff0c;其根深叶茂&#xff0c;分枝扶疏&#xff0c;为我们展示了数据分治的生动形态 目录 &#x1f333; 树 树的常见概念 &#x1f4d2;树的表示 二叉树 一…...

使用pymodbus进行modbus-TCP通信

模拟modbus-slave 创建slave 设置 完成 安装pymodbus pip3 install pymodbus2.5.3代码 from pymodbus.client.sync import ModbusTcpClient from pymodbus.bit_read_message import ReadCoilsResponse from pymodbus.register_read_message import ReadInputRegistersRe…...

2. redis常见数据类型

一、Redis 数据类型 Redis支持五种数据类型&#xff1a;string&#xff08;字符串&#xff09;&#xff0c;hash&#xff08;哈希&#xff09;&#xff0c;list&#xff08;列表&#xff09;&#xff0c;set&#xff08;集合&#xff09;及zset(sorted set&#xff1a;有序集合…...

多测师肖sir_高级金牌讲师_python之结构语句005

python中常见语句&#xff1a; 一、目录&#xff1a; 1、if语句 2、while 循环语句 3、for循环语句 4、continue 语句 5、break 语句 二、语句详解 1、if判断语句 &#xff08;1&#xff09;if单分支 格式&#xff1a;if 判断条件&#xff1a; 语句块1…… else&#xff1a; 语…...

用3-8译码器实现全减器

描述 请使用3-8译码器和必要的逻辑门实现全减器&#xff0c;全减器接口图如下&#xff0c;A是被减数&#xff0c;B是减数&#xff0c;Ci是来自低位的借位&#xff0c;D是差&#xff0c;Co是向高位的借位。 3-8译码器代码如下&#xff0c;可将参考代码添加并例化到本题答案中。 …...

招投标系统简介 企业电子招投标采购系统源码之电子招投标系统 —降低企业采购成本

功能描述 1、门户管理&#xff1a;所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含&#xff1a;招标公告、非招标公告、系统通知、政策法规。 2、立项管理&#xff1a;企业用户可对需要采购的项目进行立项申请&#xff0c;并提交审批&#xff0c;查看所…...

Linux Centos7 下使用yum安装的nginx平滑升级

1. 查看当前nginx版本 1nginx -v2. 查看centos版本 1cat /etc/redhat-release3. 创建一个新的文件nginx.repo&#xff0c;其中第三行的7是因为我的centos版本是7点多的&#xff0c;你看自己是多少就改多少 1vim /etc/yum.repos.d/nginx.repo23[nginx]4namenginx repo 5baseu…...

C/S架构学习之多线程实现TCP并发服务器

并发概念&#xff1a;并发是指两个或多个事件在同一时间间隔发生&#xff1b;多线程实现TCP并发服务器的实现流程&#xff1a;一、创建套接字&#xff08;socket函数&#xff09;&#xff1a;通信域选择IPV4网络协议、套接字类型选择流式&#xff1b; int sockfd socket(AF_IN…...

iPhone手机记笔记工具选择用哪个

iPhone手机大家应该都比较熟悉&#xff0c;其使用性能是比较流畅的&#xff0c;在iPhone手机上记录笔记可以帮助大家快速地进行总结工作、记录工作内容等&#xff0c;在iPhone手机上记笔记工具选择用哪个呢&#xff1f; 可以在iPhone手机上使用的笔记工具是比较多的&#xff0…...

MyBatis动态SQL(if、choose、when和otherwise)标签

动态 SQL 是 MyBatis 的强大特性之一。在 JDBC 或其它类似的框架中&#xff0c;开发人员通常需要手动拼接 SQL 语句。根据不同的条件拼接 SQL 语句是一件极其痛苦的工作。例如&#xff0c;拼接时要确保添加了必要的空格&#xff0c;还要注意去掉列表最后一个列名的逗号。而动态…...

idea将jar包deploy到本地仓库

1、pom.xml文件引入配置&#xff0c;如下参考&#xff1a; <distributionManagement><snapshotRepository><id>maven-snapshots</id><url>http://nexus1.coralglobal.cn/repository/maven-snapshots/</url></snapshotRepository><…...

麻省理工学院与Meta AI共同开发StreamingLLM框架,实现语言模型无限处理长度

&#x1f989; AI新闻 &#x1f680; 麻省理工学院与Meta AI共同开发StreamingLLM框架&#xff0c;实现语言模型无限处理长度 摘要&#xff1a;麻省理工学院与Meta AI的研究人员联合研发了一款名为StreamingLLM的框架&#xff0c;解决了大语言模型在RAM与泛化问题上的挑战&am…...

记录 K8S 挂了的解决经过

背景&#xff1a;早上到公司&#xff0c;有同事反馈部署K8S在集群上的 Redis 和 禅道 都不可用 排查循序&#xff1a; 登录 kubesphere 的 web 界面 &#xff08;界面打开失败&#xff09;ssh 登录主服务器 &#xff08;正常&#xff09;在主服务器上运行 kubectl get node 命…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

ThreadLocal 源码

ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物&#xff0c;因为每个访问一个线程局部变量的线程&#xff08;通过其 get 或 set 方法&#xff09;都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段&#xff0c;这些类希望将…...

Linux中INADDR_ANY详解

在Linux网络编程中&#xff0c;INADDR_ANY 是一个特殊的IPv4地址常量&#xff08;定义在 <netinet/in.h> 头文件中&#xff09;&#xff0c;用于表示绑定到所有可用网络接口的地址。它是服务器程序中的常见用法&#xff0c;允许套接字监听所有本地IP地址上的连接请求。 关…...