首页 > 其他分享 >CSS-vmin&vmax单位

CSS-vmin&vmax单位

时间:2024-04-23 21:11:57浏览次数:23  
标签:vmin 高度 视图 视口 vmax 宽度 CSS

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%左右,并不会被压缩:

 

扩展:
https://www.php.cn/blog/detail/25443.html   用CSS单位px、em、rem、vh、vw、vmin、vmax实现响应式完美布局!

 

标签:vmin,高度,视图,视口,vmax,宽度,CSS
From: https://www.cnblogs.com/zccst/p/18153751

相关文章

  • table固定表头和列 css实现表格固定表头
    Hello,大家好,我是站长鹏仔,本次鹏仔开发的项目中,实现出功能如图所示,固定表格的头部和左侧,在超出时滚动条滚动悬浮,之前给大家写过一次表格表头固定,是用占位的方式(https://www.sharedbk.com/post/178.html),太麻烦了,本次给大家分享一个更简单的方法。本次主要用到的css属性是粘性定位......
  • 聊聊css中的BFC
    BFC,即BlockFormattingContext(块级格式化上下文),是CSS布局的一部分,用于确定块级盒子的布局及其在页面上的排列方式。BFC是一个独立的布局环境,其中的元素布局不受外部元素的影响,并且它们之间的布局不会互相影响。在一个BFC中,每个盒子按照垂直方向一个接一个地放置。具体来说......
  • 持续性学习-Day15(前端基础CSS3)
    参考教学视频:秦疆1.什么是CSSCascadingStyleSheet层叠样式表CSS3圆角、阴影、动画...浏览器兼容性CSS优势:内容和表现分离网页结构表现统一,可以实现复用样式十分的丰富建议使用独立html的css文件利用SEO,容易被搜索引擎收录2.入门<linkrel="styleshee......
  • 文字动态地变大变小(CSS)
    要在CSS中动态地改变文字大小,可以使用@keyframes规则创建一个动画,然后将该动画应用到需要改变大小的文本元素上。以下是一个示例,演示如何使文字大小在一定时间内从小变大,然后再变小:css部分:/*定义一个名为resizeText的动画*/@keyframesresizeText{0%{font-si......
  • CSS之定位Position
    前言之前在《CSS之浮动》中,我当时是想一起说说定位的,因为我在很多地方看到有把float和position放在一起讲的,说它们的一些属性值可以使元素脱离文档流,但是没想到在准备内容的时候,发现浮动的内容有点多,就先把浮动的内容单独整了一篇。本文就继续来说说定位吧。基本信息Name:p......
  • Django不显示CSS的效果(基于Django模板的静态资源配置问题)
    在搞毕设过程中,习惯起见我直接在网上找了现成的前端设计页面,如图:这种前端项目的结构一般是一个login.html、一个style.css、一个背景图片即可搞定的,直接点击html,浏览器中打开的就是上图所示的界面效果。但是:当我把前端所有文件扔进DjangoApp的templates文件夹后,运行项目的效果......
  • css3多行文本多行文本缩略点击更多展开显示全部
    比如我要实现如下效果:数据集名称展示一行,超出自动省略,末尾增加编辑icon。点击编辑的icon,换成input输入框数据集描述最多展示三行,超出自动省略。末尾增加编辑icon。点击编辑的icon,换成textarea输入框展示一行省略+icon实现单行省略实现,无非是这样<div class="flex-row al......
  • tailwindcss
    TailwindCSS是一个为快速创建定制化UI组件而设计的实用型框架。与其他CSS框架或库不同,TailwindCSS组件没有预先设置好样式。可以使用Tailwind的低级实用类来为CSS元素设置样式,如margin、flex、color等。自从2017年发布以来,TailwindCSS越来越受欢迎,因为它允许开......
  • css 动画之无缝跑马灯
    <divclass="target-top"style="overflow:hidden"><divclass="target-img"><divv-for="itemintargetFors":key="item.id">...//内容不重要</div></div>......
  • Python Flask+Pandas读取excel显示到html网页: CSS控制表格样式、表头文字居中
    前言全局说明CSS控制表格样式一、安装flask模块二、引用模块三、启动服务模块安装、引用模块、启动Web服务方法,参考下面链接文章:https://www.cnblogs.com/wutou/p/17963563Pandas安装https://www.cnblogs.com/wutou/p/17811839.htmlPandas官方API说明https://pand......