实现不同分辨率、不同缩放比例屏幕对vue显示的问题的适配解决

分析

我们使用适配常用的就是百分比 这个一般依托于父组件的宽度和高度 ,但是大部分父组件并没有设置宽度和高度,也没有继承其父组件的宽高 所以导致这个问题
另外,使用百分比有时候不生效 可以在设置宽度的时候使用vw 在设置高度的时候设置vh

tips

在固定div的高度和宽度的时候又的需要里面的内容撑开了才能显示 也就是设置的高度和宽度是最大的宽度和高度 ,并不是实际的高度 比如使用百分比布局
而使用vh和vw就是能直接看到组件有宽度和高度

解决办法

找到父组件并将其子组件宽高设置高度、宽度为100%或者使用合适的vh和vw
这样一体的继承下来就可以了

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

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

相关文章

WebService技术--随笔1

1.WebService 发展史 创建阶段(1990 年代末至 2000 年代初):在这个阶段,XML-RPC 和 SOAP 协议被引入,为跨平台和跨语言的应用程序集成提供了基础。XML-RPC 提供了一种基于 XML 的远程过程调用机制,而 SOAP…

word图片点击放大,word图片双击放大

网上自己搜了半天,都是顾左右而言他,直接实践一下。 干货就是:调整word视图为阅读模式,双机图片 就能放大查看,然后还会有一个 放大镜供点击放大到整个屏幕。 其实挺好理解的,word跟wps不同,w…

【VSCode】自定义配置

VSCode自定义配置 Visual Studio Code (VSCode) 是一个强大的开源代码编辑器,支持丰富的自定义配置。下面是一些常见的自定义配置选项,你可以根据个人喜好和工作流程进行调整: 1. 主题和配色方案: 在 “settings.json” 中设置&#xff1a…

力扣labuladong——一刷day74

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、力扣1305. 两棵二叉搜索树中的所有元素二、力扣872. 叶子相似的树 前言 二叉树的构造算法通用思路很简单,无非就是构造根节点,然后递…

我的2023 - git目录

.\0000 差旅 .\0000_BigEvent .\0000工时统计 .\000_CommonDoc .\000_Delay .\000_Done .\000_Drop .\000_参考 .\001_Cache .\11111111_zhy远程调试 .\20230802_参考项目 .\20230928_Ccz产品化 .\20231105_天津北京出差报告 .\20231207_libmodbus移植集成 .\20231213_cz原理图…

2024 年 8 款最佳数据恢复软件深度评测(Windows 和 Mac)

由于意外删除、格式化或损坏而立即丢失重要数据是一场噩梦。当您开始寻找 2024 年最好的数据恢复软件时,由于选项太多,您可能会不知所措。 2024 年 8 款最佳数据恢复软件深度评测 有些工具适用于 Windows,其他工具适用于 Mac,但并…

GZ029 智能电子产品设计与开发赛题第10套

2023年全国职业院校技能大赛高职组 “GZ029智能电子产品设计与开发”赛项赛卷十 题目:模拟工业传送带物品检测系统的设计与开发 1 竞赛任务 在智能电视机上播放工业传送带传输物品视频,模拟工业传送带物品检测系统(以下简称物品检测系统&…

如何在Spring Boot中集成RabbitMQ

如何在Spring Boot中集成RabbitMQ 在现代微服务架构中,消息队列(如RabbitMQ)扮演了关键的角色,它不仅能够提供高效的消息传递机制,还能解耦服务间的通信。本文将介绍如何在Spring Boot项目中集成RabbitMQ,…

python中else的细节

if-else 首先我们都知道else可以和if共同使用,如果if条件没有执行,就会去执行else语句 a100 if a100:print("if 语句执行了") else:print("else语句执行了") a10 if a100:print("if 语句执行了") else:print("else…

8-二分-索引二分-H 指数

这是索引二分的第八篇算法,力扣链接 给你一个整数数组 citations ,其中 citations[i] 表示研究者的第 i 篇论文被引用的次数。计算并返回该研究者的 h 指数。 根据维基百科上 h 指数的定义:h 代表“高引用次数” ,一名科研人员的 …

【游戏篇】Scratch之小猴子接水果

【作品展示】小猴子接水果 操作:点击小绿旗,按下键盘左右键控制小猴子移动拿到水果,同时也要躲避炸弹。

#HarmonyOS:应用的包名配置--应用图标和标签配置--配置链接

配置相关 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V2/application-component-configuration-stage-0000001478340869-V2 应用的包名配置 应用需要在工程的AppScope目录下的app.json5配置文件中配置bundleName标签,该标签用于标识应用的唯…

【自主探索】rrt_exploration 源码解析

各文件运行顺序&#xff1a; simple.launchglobal_rrt_detector.cpplocal_rrt_detector.cppfilter.pyassigner.py 文章目录 一、simple.launch二、global_rrt_detector.cpp三、local_rrt_detector.cpp四、filter.py五、assigner.py 一、simple.launch <!-- Launch file fo…

如何排查线上问题的?

其他系列文章导航 Java基础合集数据结构与算法合集 设计模式合集 多线程合集 分布式合集 ES合集 文章目录 其他系列文章导航 文章目录 前言 一、预警层面 1.1 做好监控告警 1.2 定位报警层面 二、近期版本 2.1 判断最近有没有发版本 2.2 回归最近的版本 三、日志告警…

用队列实现栈,力扣

题目地址&#xff1a; 225. 用队列实现栈 - 力扣&#xff08;LeetCode&#xff09; 难度&#xff1a;简单 今天刷用队列实现栈&#xff0c;大家有兴趣可以点上看看题目要求&#xff0c;试着做一下。 题目&#xff1a; 我们直接看题解吧&#xff1a; 解题方法&#xff1a; 方法…

MySQL8改库,表,字段编码及排序规则

修改数据库编码格式语句 SELECT CONCAT(ALTER DATABASE ,SCHEMA_NAME, CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;) as 修改数据库编码格式语句 FROM information_schema.SCHEMATA WHERE 11 AND SCHEMA_NAME 数据库名称 #要修改的数据库名称 -- 修改所有自建库 -…

conda环境报错: Solving environment: failed with initial frozen solve.

出现的情况&#xff1a; 解决方法&#xff1a; 参考了许多博客 建议的方法&#xff1a; 创建一个虚拟环境 conda create -n torch_1.3 python3.6 激活虚拟环境 conda activate torch_1.3 conda安装 conda install pytorch1.5.0 如果报错每个包单独安装就可以了&#x…

使用CFimagehost源码自建无需数据库支持的PHP图片托管服务

文章目录 1.前言2. CFImagehost网站搭建2.1 CFImagehost下载和安装2.2 CFImagehost网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar临时数据隧道3.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;3.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 4.公网访问测…

k8s-learning-why we need pod

应用场景 应用从虚拟机迁移到容器中 为什么虚拟机中的应用不能无缝迁移到容器中 虚拟机中应用&#xff1a;一组进程&#xff0c;被管理在systemd或者supervisord中 容器的本质&#xff1a;一个容器一个进程 所以将运行在虚拟机中的应用无缝迁移到容器中&#xff0c;与容器…

addslashes()函数

addslashes() 函数是 PHP 中用于在字符串中的特定字符前添加反斜杠 \ 的函数。它通常用于准备字符串&#xff0c;以防止其中的字符被误解为具有特殊含义的字符。这个函数的主要用途是在构建 SQL 查询语句或其他需要转义特殊字符的上下文中&#xff0c;以防范一些安全问题&#…