vue 和 js写屏幕自适应

news2025/1/11 16:22:00

实现屏幕自适应的方式有很多种,可以通过插件本身提供的方法,可以通过flex布局等,今天我们来写写通过js实现屏幕自适应。
以下是在vue中实现的屏幕自适应

  1. 首先在data中定义一下屏幕的默认大小和缩放比例
    在这里插入图片描述
  2. 然后在mounted中获取窗口的内置宽高,并计算缩放比例
    在这里插入图片描述
  3. 监听事件,当screen发生变化时,重新计算缩放比例

在这里插入图片描述

  1. 给最外层的div设置transform 属性,不要忘记要给固定宽高样式,app.vue中也要给固定宽高
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述

  1. 在utils中新建一个rem.js文件,获取最外层的fontSize,并按比例计算
    在这里插入图片描述

  2. 在main.js中引入
    在这里插入图片描述
    至此,便完成了屏幕的自适应。

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

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

相关文章

使用 Vue 和 Ant Design 实现抽屉效果的模块折叠功能

功能描述: 有两个模块,点击上面模块的收起按钮时,上面的模块可以折叠,下面的模块随之扩展 代码实现: 我们在 Vue 组件中定义两个模块的布局和状态管理: const scrollTableY ref(560); // 表格初始高度…

Excel中如何用公式列出包含特定文本的所有单元格?

如下图,希望用公式得到“以分布式开始”的G列数据。 一、高版本公式 FILTER(E2:E9,LEFT(E2:E9,3)"分布式") 用LEFT函数提取数据的左侧3个字符,是“分布式”的就是以它开始的数据了,用FILTER函数筛选出来即可。 二、低版本公式 如…

【智能算法应用】基于A星算法求解六边形栅格地图路径规划

目录 1.算法原理2.结果展示3.参考文献4.代码获取 1.算法原理 精准导航:用A*算法优化栅格地图的路径规划【附Matlab代码】 六边形栅格地图 分析一下地图: 六边形栅格地图上移动可以看做6领域运动,偶数列与奇数列移动方式有所差异&#xff0…

【FreeRTOS】内存管理

目录 1 为什么要自己实现内存管理2 FreeRTOS的5中内存管理方法2.1 Heap_12.2 Heap_22.3 Heap_32.4 Heap_4 2.5 Heap_53 Heap相关的函数3.1 pvPortMalloc/vPortFree3.2 xPortGetFreeHeapSize 3.3 xPortGetMinimumEverFreeHeapSize3.4 malloc失败的钩子函数 参考《FreeRTOS入门与…

CleanMyMac是否有必要购买?2024年6.18有什么优惠活动?

CleanMyMac X是专业的Mac应用卸载,清理优化,软件管理更新工具,兔八哥爱分享获取cleanmymac激活码更安全,让你的Mac电脑焕然一新 CleanMyMacX是一款强大的Mac清理和优化工具,针对系统垃圾、恶意软件和隐私保护提供解决方案。重度用户因其高效性能和全面功能可能需要…

Python学习从0开始——Kaggle时间序列002

Python学习从0开始——Kaggle时间序列002 一、作为特征的时间序列1.串行依赖周期 2.滞后序列和滞后图滞后图选择滞后 3.示例 二、混合模型1.介绍2.组件和残差3.残差混合预测4.设计混合模型5.使用 三、使用机器学习进行预测1.定义预测任务2.为预测准备数据3.多步骤预测策略3.1 M…

unidbg讲解V1

前言 unidbg是什么? unidbg是一个Java项目,可以帮助我们去模拟一个安卓或IOS设备,用于去执行so文件中的算法,从而不需要再去逆向他内部的算法。最终会产出一个jar包,可以被python进行调用。 如何使用unidbg? 下载github上开源的项目:https://github.com/zhkl0228/un…

Java基础面试重点-3

41. 简述线程生命周期(状态) 其它参考《多线程重点》中的说法。三种阻塞: 等待阻塞: 运行的线程执行o.wait()方法(该线程已经持有锁),JVM会把该线程放入等待队列中。同步阻塞: 运行的线程在获取对象的同步…

Kafka高频面试题整理

文章目录 1、什么是Kafka?2、kafka基本概念3、工作流程4、Kafka的数据模型与消息存储机制1)索引文件2)数据文件 5、ACKS 机制6、生产者重试机制:7、kafka是pull还是push8、kafka高性能高吞吐的原因1)磁盘顺序读写:保证了消息的堆积2)零拷贝机…

YOLOv9改进策略 | 损失函数篇 | 利用SlideLoss助力YOLOv9有效涨点(附代码 + 完整修改方式)

一、本文介绍 本文给大家带来的是分类损失 SlideLoss损失函数,我们之前看那的那些IoU都是边界框回归损失,和本文的修改内容并不冲突,所以大家可以知道损失函数分为两种一种是分类损失另一种是边界框回归损失,上一篇文章里面我们总…

SIGMOD 2024会议现场第二弹:中国论文接收量断崖式领先,引领全球数据创新潮流

今天是 ACM SIGMOD Conference(ACM Special Interest Group on Management of Data Conference),即国际数据管理大会举办的第五天!在这个充满活力的学术盛会上,全球顶尖学者、行业专家和学生热情汇聚,共享数…

Java项目:111 基于SpringBoot的在线家具商城设计与实现

作者主页:舒克日记 简介:Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 本系统有管理员和用户两个角色,包括前台商城平台及后台管理系统。 前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订…

警惕!这本SCIE正在被​“On Hold”!

【欧亚科睿学术】 近期,经小编查询,一本近乎百分百录用率、且生信友好的“毕业神刊”——JOURNAL OF BIOLOGICAL REGULATORS AND HOMEOSTATIC AGENTS被科睿唯安打上了“On Hold”标识。 图片来源:科睿唯安(2024年6月13日查&#…

UML类图之间的关系与对应的代码关系

UML类图之间的关系与对应的代码关系 1. 依赖关系1.1 图解1.2代码实现 2. 关联关系2.1图解2.2代码实现 3. 聚合关系3.1图解3.2代码实现 4. 组合关系4.1图解4.2代码实现 5. 泛化关系5.1图解5.2代码实现 6. 实现关系6.1图解6.2代码实现 在UML中,共有四种关系&#xff1…

第 3 章:Spring Framework 中的 AOP

第 3 章:Spring Framework 中的 AOP 讲完了 IoC,我们再来聊聊 Spring Framework 中的另一个重要内容——面向切面编程,即 AOP。它是框架中众多功能的基础,例如声明式事务就是依靠 AOP 来实现的。此外,Spring 还为我们…

发布中文文档类资源仓库-ChineseDocumentPDF

引言 今天中午,排队打饭间隙,刷到新闻,说是:360AILAB-NLP团队开源了中文论文、研报文档场景的轻量化版式分析模型360LayoutAnalysis。 面向中文论文及研报两个场景的轻量化版式分析模型已经开源: Github地址&#x…

wms海外仓系统排名分析:哪个才更适合中小海外仓

对中小型海外仓来说,想在竞争激烈的市场下生存,关键就在于是否能改变自己落后的仓储管理模式,提升客户满意度和业务流畅度。 wms海外仓系统作为这一领域的关键工具,可以说在很大程度上决定了海外仓的业务标准化程度发展。不过现在…

VMware安装Debian,Debian分区,虚拟机使用NAT模式联网,Linux设置静态IP

官网 https://www.debian.org/download stable是稳定版 win下amd64就行,macOs装arm架构的 安装Debian虚拟机 教程里没有的只管往下点就完了 哪个都行 选镜像 选安装位置 别超过宿主机内核就行 看你需求 NAT模式 虚拟 看你需求 其他的也检查一下 图形安装 选中文 继…

C++:SLT容器-->deque

C:SLT容器-->deque 1. 构造函数2. deque 赋值操作3. deque 大小操作4. deque 插入和删除5. deque 容器数据存取6. deque 排序操作 双端数组&#xff0c;可以对头部和尾部进行插入删除操作 需要导入头文件#include <deque> 1. 构造函数 deque deqT; // 默认构造函数 de…

6.13.1 使用残差神经网络堆叠集成进行乳腺肿块分类和诊断的综合框架

计算机辅助诊断 (CAD) 系统需要将肿瘤检测、分割和分类的自动化阶段按顺序集成到一个框架中&#xff0c;以协助放射科医生做出最终诊断决定。 介绍了使用堆叠的残差神经网络 (ResNet) 模型&#xff08;即 ResNet50V2、ResNet101V2 和 ResNet152V2&#xff09;进行乳腺肿块分类…