vh、vw、vmin、vmax

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.mzph.cn/news/106228.shtml

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

相关文章

protobuf 插件(option)使用

protobuf的option使用 一、需求 来源于工作中的一个需求:在传递message时需要对message中不同的字段进行不同的处理,而处理方式通过注释标注在了每个字段的定义后。 类似于有下面这样一个消息: 其中字段1是始终需要的,字段2和3…

Mall脚手架总结(五) —— SpringBoot整合MinIO实现文件管理

前言 在项目中我们经常有资源的上传和下载的功能需求,比如用户头像、产品图片、配置文件等等,大数据量的文件存储无疑需要更高性能的数据存储服务,对于无需对结构实现复杂查询的文件对象来说,对象存储服务无疑是一个较好的选择&am…

uniapp编译到小程序Component is not found in path “components/energy/illumination“

Component is not found in path "components/energy/illumination" 直接清除缓存重新编译

Ubuntu下怎么配置vsftpd

2023年10月12日,周四中午 目录 首先要添加一个系统用户然后设置这个系统用户的密码给新创建的系统用户创建主目录启动vsftpd服务查看vsftpd服务的状态打开外界访问vsftpd服务所需的端口获取服务器的IP地址大功告成 首先要添加一个系统用户 useradd 用户名然后设置…

APP备案避坑指南,值得收藏

目录 什么时间节点前需完成备案? APP/小程序一定要做备案吗? 涉及前置审批的APP有哪些? APP 支持安卓、IOS 多个运行平台,应该备案多少次? 企业是自有服务器,该如何进行APP备案? APP备案可…

【Spring框架】Spring监听器的简介和基本使用

目录 一、观察者模式 1.1 模型介绍 1.2 观察者模式Demo 1.2.1 观察者实体 1.2.2 主题实体 1.2.3 测试代码 二、Spring监听器的介绍 2.1 事件(ApplicationEvent) 2.1.1 Spring内置事件 2.1.2 Spring内置事件 2.2 事件监听器(Applic…

C/C++基础讲解(一百三十一)之经典篇(信息合并/平均分数存储)

C/C++基础讲解(一百三十一)之经典篇(信息合并/平均分数存储) 程序之美 前言 很多时候,特别是刚步入大学的学子们,对于刚刚开展的计算机课程基本上是一团迷雾,想要弄明白其中的奥秘,真的要花费一些功夫,我和大家一样都是这么啃过来的,从不知到知知,懵懂到入门,每一步…

三大方法快速发现商业规律

文章目录 三大方法快速发现商业规律一、市场调研二、数据分析三、案例分析 📕我是廖志伟,一名Java开发工程师、Java领域优质创作者、CSDN博客专家、51CTO专家博主、阿里云专家博主、清华大学出版社签约作者、产品软文创造者、技术文章评审老师、问卷调查…

PHP LFI 利用临时文件Getshell

PHP LFI 利用临时文件 Getshell 姿势-安全客 - 安全资讯平台 LFI 绕过 Session 包含限制 Getshell-安全客 - 安全资讯平台 目录 PHP LFI 利用临时文件Getshell 临时文件 linux 和 windows的 临时文件存储规则 linux和windows对临时文件的命名规则 PHPINFO()特性 原理 条…

Python点击exe后报错:Failed to execute script xxxx问题的解决办法

最近工作在弄人脸识别的问题,从gitee来pull了一个但是发现报了一个Failed to execute script XXX的问题 造成这个问题的原因是执行文件exe存放的目录不对,可能在打包前exe文件并不是存在在这个位置。 解决方案将exe文件尝试存在在不同目录下&#xff…

详解Pinia和Vuex

一、vuex介绍 1.什么是vuex?为什么要使用vuex? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 在vue最重要的就是数据驱动和组件化&#x…

JAVA经典百题之按位与运算符 ``的使用

当学习Java语言中的按位与运算符 & 时,需要理解其用途、应用场景、示例源代码以及相应的注意事项。以下是一篇关于Java语言按位与运算符的详细文章,包括示例源代码和注释。 Java语言中的按位与运算符 & 按位与运算符 & 是Java语言中用于对…

Qt之submodule编译

工作中会遇到这样一种情况:qt应用程序在运行时提示找不到某个qt的动态库。我遇到的是缺少libQt5Websocket.so,因为应用程序是在x86平台银河麒麟v10上开发,能够正常编译运行,然后移植到rk3588(aarch64架构)上…

文心大模型写——网课点播系统(项目需求)

参考文心大模型写TodoList项目需求 输入 你是一名资深的互联网软件行业产品经理。 现在要设计一个"网课点播系统"项目,它有哪些功能和需求? 分条目写出需求大纲。 输出 设计一个"网课点播系统"项目需要考虑以下功能和需求: 课程管理 课程…

刚参加工作的表弟问我如何设计一个表

文章目录 以公司表模版为基础,确定表名,固定字段不要给字段或者表设置字符集用业务主键还是自增主键创建时间,更新时间要不要使用数据库默认的时间 表弟能问出这个问题,表哥是吃惊又欣慰。吃惊是年纪轻轻的小伙子竟然知道设计表的…

NeuroImage | 右侧颞上回在语义规则学习中的作用:来自强化学习模型的证据

在现实生活中,许多规则的获取通常需要使用语言作为桥梁,特别是语义在信息传递中起着至关重要的作用。另外,个体使用的语言往往具有明显的奖励和惩罚元素,如赞扬和批评。一种常见的规则是寻求更多的赞扬,同时避免批评。…

【翻译】Efficient Data Loader for Fast Sampling-Based GNN Training on Large Graphs

转载请注明出处:小锋学长生活大爆炸[xfxuezhang.cn] 此内容为机器翻译的结果,若有异议的地方,建议查看原文。 机器翻译的一些注意点,比如: 纪元、时代 > epoch工人 > worker火车、培训、训练师 > train Effic…

c# 弹出背景透明图

1. 在窗体中添加 picturebox 控件 2. 在 picturebox 中添加 “png ” 背景透明图,或者GIF图,属性设置如下 3. 在窗体初始化中,添加如下代码 this.BackColor Color.LimeGreen; this.TransparencyKey Color.LimeGreen; 此功能可以用来展示…

只出现一次的数字Ⅱ

题目:力扣(LeetCode)官网 - 全球极客挚爱的技术成长平台 题解:对数组进行排序,排序后循环判断当前子元素与前后子元素是否相等,不相等即为只出现一次的数字 代码: public int singleNumber(i…

【Vue面试题三十】、vue项目本地开发完成后部署到服务器后报404是什么原因呢?

文章底部有个人公众号:热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享? 踩过的坑没必要让别人在再踩,自己复盘也能加深记忆。利己利人、所谓双赢。 面试官:vue项目本地开发完成后部…