vh、vw、vmin、vmax

news2024/11/30 15:25:12
1、分别是什么?

vh:指屏幕可见视窗的高,

vw:指屏幕可见视窗的宽,

vmin:vh和vw之间选较小的值,

vmax:vh和vw之间选较大的值。

2、和百分比的区别

百分比时基于父元素的宽高,而vh\vw\vmin\vmax基于屏幕可见视图的宽或者高

3、vmin妙用

比如想做一个适配pc端和手机端的圆

.circle{

    width: 100vw;

    height: 100vh;

    border:solid 1px black;

    border-radius: 50%;

}

显然获取的是一个椭圆:

所以首先圆的宽高时等长。那么width和height的单位怎么选呢?如果都填vh呢?

pc端显示相对正常:

移动端异常:因为直径是按照屏幕的高来决定,而手机端高大于宽,用单位vw同理。

这个时候用vmin就很好的规避适配异常的情况 

.circle{

    width: 100vmin;

    height: 100vmin;

    border:solid 1px black;

    border-radius: 50%;

}

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

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

相关文章

【MySQL JDBC】使用Java连接MySQL数据库

一、什么是JDBC? 理解API的概念 API:Application Programing Interface -- 应用程序编程接口写好一个程序,这个程序需要给别人提供哪些功能?这些功能就是通过一些 函数/类 这样的方式来提供的。例如 Random、Scanner、ArrayList..…

2.Python-用Flask框架创建一个简单的Web程序

怎么安装Flask框架 在终端输入以下命令: pip install flask 验证flask安装: flask --version 编写app.py文件 app文件py如下: #导入flask框架中的两个模块 #Flask允许创建一个Flask应用实例,处理路由、请求和响应等功能 #render…

zookeeper应用场景(二)

单机环境下可以利用jvm级别的锁,比如synchronized、Lock等来实现锁,如果是多机部署就需要一个共享数据存储区域来实现分布式锁 一、分布式锁实现方式 1、基于数据库实现分布式锁 可以用数据库唯一索引来实现 2、基于redis实现分布式锁 redis实现的分…

测试除了点点点,还有哪些内容呢?

今天和一个网友讨论了一下关于互联网行业中测试的情况,希望能够了解现在的互联网行业主要的测试工作内容。小编根据以往的工作经历和经验情况,来做一个总结和整理。 1、岗位分类 现在的岗位划分主要是分为两大类:测试工程师 和 测试开发工程…

1、验证1101序列(Moore)

题目要求: 用Moore型状态机验证1101序列。 题目描述: 用使用状态机验证1101序列,注意:允许重复子序列。如图 端口描述: module moore_1101(input clk,//时钟信号input clr,//reset复位信号,高电平有效in…

Netty 入门 — 亘古不变的Hello World

这篇文章我们正式开始学习 Netty,在入门之前我们还是需要了解什么是 Netty。 什么是 Netty 为什么很多人都推崇 Java boy 去研究 Netty?Netty 这么高大上,它到底是何方神圣? 用官方的话说:Netty 是一款异步的、基于事…

【网络协议】聊聊ifconfig

我们知道在linux是ifconfig查看ip地址,但是ip addr也可以查看 IP 地址是一个网卡在网络世界的通讯地址,相当于我们现实世界的门牌号码。 从IP地址的划分来看,C类地址只可以容纳254个,而B类6W多,那么又没有一种折中的…

系统文件IO、文件描述符fd、重定向、文件系统、动态库和静态库

目录 C文件接口系统文件I/O系统调用和库函数文件描述符0 & 1 & 2FILE和fd的关系文件描述符的分配规则 重定向重定向的本质输出重定向输入重定向追加重定向 dup2函数 FILE理解文件系统了解磁盘的物理结构逻辑抽象文件系统文件系统的图解和解析通过文件系统来理解ls -al通…

74.C++ STL stack容器

目录 1.什么是stack 2.stack的构造函数 3.赋值操作 4.数据存取操作 5.大小操作 1.什么是stack stack 是 C 标准库中的容器适配器,它提供了一个堆栈(栈)数据结构的封装,用于管理元素的插入和移除。栈是一种后进先出的数据结构…

【RWKV】如何新增一个自定义的Tokenizer和模型到HuggingFace

0x0. 前言 RWKV社区在Huggingface上放了rwkv-4-world和rwkv-5-world相关的一系列模型,见:https://huggingface.co/BlinkDL/rwkv-4-world & https://huggingface.co/BlinkDL/rwkv-5-world ,然而这些模型的格式是以PyTorch的格式进行保存的…

$ vue -Vbash: vue: command not found

$ vue -V bash: vue: command not found报这个错,我们需要找到vue安装路径,添加在环境变量的用户变量中: 1、vue安装路径 2、编辑环境变量 然后重新打开命令框,就可以了

嵌入式数据库sqlite3【基础篇】基本命令操作,小白一看就懂(C/C++)

目录 前言 一、sqlite概念和特性 二、sqlite安装 三、sqlite3数据类型 四、sqlite数据库约束 五、sqlite常用命令 六、SQL语句(增删改查) 七、sqlite使用实例(教学管理数据库) 总结 前言 数据在实际工作中应用非常广泛…

Linux网络编程系列之服务器编程——阻塞IO模型

Linux网络编程系列 (够吃,管饱) 1、Linux网络编程系列之网络编程基础 2、Linux网络编程系列之TCP协议编程 3、Linux网络编程系列之UDP协议编程 4、Linux网络编程系列之UDP广播 5、Linux网络编程系列之UDP组播 6、Linux网络编程系列之服务器编…

Stream流中的 max()和 sorted()方法

需求:某个公司的开发部门,分为开发 一部 和 二部 ,现在需要进行年中数据结算。分析: 员工信息至少包含了(名称、性别、工资、奖金、处罚记录)开发一部有 4 个员工、开发二部有 5 名员工分别筛选出 2 个部门…

1.2 向量的长度与点积

一、向量的点积 两个向量 v ( v 1 , v 2 ) \boldsymbol v(v_1,v_2) v(v1​,v2​) 与 w ( w 1 , w 2 ) \boldsymbol w(w_1,w_2) w(w1​,w2​)的点积或内积是数字 v ⋅ w \boldsymbol v\cdot\boldsymbol w v⋅w: v ⋅ w v 1 w 1 v 2 w 2 ( 1.2.1 ) \boldsymbo…

【Agora UID 踩坑记录 Java 数据类型】

目录 负数二进制表示Java中32位无符号数的取法项目踩坑记录Java 0xffffffff隐式类型转换的坑 负数二进制表示 由于计算机中数据都以二进制表示,而负数的二级制是根据正数二进制取补码(补码就是先取反码,然后加1)得到,…

关于Gym变成Gymnasium

根据网页搜索的gym官网,发现如下网站https://www.gymlibrary.dev/ 刚进页面时 翻译一下,意思就是 Gym 的所有开发都已迁移到 Gymnasium,这是 Farama 基金会中的一个新软件包,由过去 18 个月来维护 Gym 的同一团队开发人员维护。如果您已经在使用最新版…

Java基础(运算符篇)

一、算术运算符 正号-负号加法-减法*乘法/除法%模运算(取余)自增--自减 算术运算符的使用比较简单,只需要注意一些细节。 tips: 加号( )除了可以作为正号,还可以用于字符串拼接。 public c…

解读下SWD协议以及其应用

SWD协议原理 SWD(Serial Wire Debug)协议是一种用于ARM Cortex微控制器的调试接口协议。它定义了主机计算机与目标设备之间通过SWD线进行通信的格式和规范。 SWD协议使用两根线进行通信:SWDIO(Serial Wire Debug I/O&#xff09…

跳石板(牛客)

目录 一、题目 二、代码 &#xff08;一&#xff09;解法一&#xff1a;超时了 &#xff08;二&#xff09;优化 一、题目 跳石板_牛客题霸_牛客网 二、代码 &#xff08;一&#xff09;解法一&#xff1a;超时了 #include <climits> #include <iostream> …