当前位置: 首页 > 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 命…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

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

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

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...