CSS-vminvmax单位

vmin 和 vmax 单位

vmin 是相对于视口宽度和高度中较小值进行计算,它的值为视口宽度和高度中的较小值的百分比。

例如,如果视口宽度为 800px,高度为 1000px,那么 1vmin 等于 8px(800px 的 1%)。


vmax 是相对于视口宽度和高度中较大值进行计算,它的值为视口宽度和高度中的较大值的百分比。

例如,如果视口宽度为 800px,高度为 1000px,那么 1vmax 等于 10px(1000px 的 1%)。

补充:

vmin和vmax是相对于窗口视图来说的,与父级元素等无关,同时要进行兼容性检查测试!

如下图,整个app-header的高度是25vh,也就是视图窗口高度的25%, 而img的高度是40vmin,视图的高度小于宽度,所以40vmin是相较于高度的40%,受父级高度影响会往上隐藏,隐藏的部分大于高度的15%左右,并不会被压缩:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Linux】权限(shell运行原理、概念,Linux权限)

🌈个人主页:秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343🔥 系列专栏:https://blog.csdn.net/qinjh_/category_12625432.html 目录 shell命令以及运行原理 创建和删除用户 创建新普通用户 删除用户 Linux权…

【bug】使用mmsegmentaion遇到的问题

利用mmsegmentaion跑自定义数据集时的bug处理(使用bisenetV2) 1. ValueError: val_dataloader, val_cfg, and val_evaluator should be either all None or not None, but got val_dataloader{batch_size: 1, num_workers: 4}, val_cfg{type: ValLoop}, …

Elasticsearch单机部署(Linux)

1. 准备环境 本文中Elasticsearch版本为7.12.0,JDK版本为1.8.0,Linux环境部署。 扩展: (1)查看Elasticsearch对应的常用的jdk版本如下:(详情可看官网的支持一览表) Elasticsearch a…

CTF网络安全大赛详情

网络安全已成为现代社会的一个关键挑战,随着互联网技术的飞速发展,从个人隐私保护到国家安全,网络安全的重要性日益突显。为了应对这一挑战,CTF(Capture The Flag,中文:夺旗赛)应运而…

03-JAVA设计模式-命令模式

命令模式 什么是命令模式 命令模式(Command Pattern)是一种行为设计模式,它将请求封装为对象,从而使你可用不同的请求把客户端与请求的处理者解耦,也称动作模式或事物模式。 在命令模式中,命令对象封装了接收者对象…

Hive架构原理

Hive Hive 的架构是设计用于在大数据环境下进行数据仓库操作和分析的系统。它建立在 Hadoop 生态系统之上,利用 Hadoop 的存储(HDFS)和计算(MapReduce、Tez、Spark 等)能力。 1. 元数据存储(Metastore&am…

计算机网络-IS-IS链路状态数据库同步

在建立IS-IS邻接关系之后,路由器开始发送LSP报文进行链路状态数据库进行同步。 一、链路状态数据库同步 LSP( Link State PDU,链路状态报文) 用于交换链路状态信息。LSP分为两种:Level–1 LSP和Level–2 LSP。Level–1…

前端入门:HTML(列表和边框案例)

1.列表知识&#xff1a; list-style-position有两个值&#xff0c;分别是inside&#xff0c;outside&#xff0c;分别表示在标签里面和在标签外面。 2.案例&#xff1a; 源代码&#xff1a; html: <body> <div class"bigBox"> <div>在线解答问题…

基于Springboot+Mybatis-Plus+mysql+html旅游网站

博主介绍&#xff1a; 大家好&#xff0c;本人精通Java、Python、C#、C、C编程语言&#xff0c;同时也熟练掌握微信小程序、Php和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我有丰富的成品Java、Python、C#毕设项目经验&#xff0c;能够为学生提供各类…

【Spring进阶系列丨最终篇】一文详解Spring中的事务控制

0、说明 本篇文章是【Spring进阶系列】专栏的最后一篇文章&#xff0c;至此&#xff0c;我们对Spring的学习就告一段落&#xff0c;接下来我会持续更新【SpringSpringMVCMyBatis整合】专栏&#xff0c;欢迎免费订阅&#xff01; 文章目录 0、说明 一、Spring事务控制1、事务的环…

PDPS16.0单机版及许可证服务器授权安装教程分享

此前小编做过PDPS15(Tecnomatix_15.0)安装包及安装教程分享&#xff0c;此次分享是PDPS16(Tecnomatix_16.0)单机版安装结合SPLMLicenseServer许可证服务器授权安装的教程。服务器型是完整的pdps&#xff0c;单机版只装了个ps&#xff0c;ps的功能一样&#xff0c;仿真需求没要求…

iPerf 3 测试UDP和TCP方法详解

文章目录 前言一、What is iPerf / iPerf3 ?二、功能1. TCP and SCTP2. UDP3. 其他 三、 Iperf的使用1.Iperf的工作模式2. 通用指令3. 服务端特有选项4. 客户端特有选项5. -t -n参数联系 四、Iperf使用实例1. 调整 TCP 连接1. 1TCP 窗口大小调节1. 2 最大传输单元 (MTU)调整 2…

华为P系列“砍了”,三角美学系列全新登场

2021 年 10 月&#xff0c;Intel 正式带来了颠覆以往的第 12 代酷睿「混合架构」 CPU。 不知道是良心发现还是为了弥补 11 代酷睿过于拉胯表现&#xff0c;Intel 终于把狠活儿都用在了这代。 全新 Intel 7 工艺、全新架构、单核与多核性能大幅提升&#xff0c;让大家十分默契…

数字化革新:可视化墨水屏引领基板工艺MSAP贴膜阶段迈向无纸化高端制造应用背景

随着科技的飞速发展和环境保护意识的日益增强&#xff0c;制造印刷电路板&#xff08;PCB&#xff09;行业正面临着提升生产效率、降低资源消耗和推动绿色制造的迫切需求。 问题&#xff1a; PCB生产过程对洁净度要求高&#xff0c;传统打印的纸张会有粉尘&#xff0c;纸屑&am…

怎么通过Javascript脚本实现远程控制一路开关

怎么通过Javascript脚本实现远程控制一路开关呢&#xff1f; 本文描述了使用Javascript脚本调用HTTP接口&#xff0c;实现控制一路开关。一路开关可控制一路照明、排风扇等电器。 可选用产品&#xff1a;可根据实际场景需求&#xff0c;选择对应的规格 序号设备名称1智能WiFi…

腾讯云轻量应用服务器和CVM S5服务器有什么区别?

腾讯云轻量应用服务器和CVM云服务器S5有什么不同&#xff1f;性能哪个更好一些&#xff1f;CVM S5云服务器CPU采用2.5GHz主频的Intel Xeon Cascade Lake或者Intel Xeon Cooper Lake处理器&#xff0c;轻量不支持指定CPU&#xff0c;从功能、内网连通性、集群及公网带宽等方面对…

React 19 带来了 JSX 运行时的重要更新

在 React 的发展历程中&#xff0c;JSX 运行时一直扮演着重要的角色。在以前的的版本&#xff0c;JSX 运行时会克隆传入的 props 对象&#xff0c;这背后有着两大原因。 历史原因 React 保留了一些特殊的 prop 名称&#xff0c;如 key 和在 React 19 之前的 ref。这些 prop 并…

公钥密码学Public-Key Cryptography

公钥或非对称密码学的发展是整个密码学历史上最伟大的&#xff0c;也许是唯一真正的革命。The development of public-key, or asymmetric, cryptography is the greatest and perhaps the only true revolution in the entire history of cryptography. 公钥算法基于数学函数…

14.接口自动化测试-造数据

1.测试造数据 工作场景&#xff1a; 需要造一批测试数据 解决方案&#xff1a; &#xff08;1&#xff09;使用字符串拼接 135XXXXX &#xff08;2&#xff09;使用第三方库去做 faker 安装&#xff1a; pip install Faker 若安装不成功&#xff0c;可能是需要清下缓存&a…

使用Azure AI Search和LlamaIndex构建高级RAG应用

RAG 是一种将公司信息合并到基于大型语言模型 &#xff08;LLM&#xff09; 的应用程序中的常用方法。借助 RAG&#xff0c;AI 应用程序可以近乎实时地访问最新信息&#xff0c;团队可以保持对其数据的控制。 在 RAG 中&#xff0c;您可以评估和修改各个阶段以改进结果&#x…