CSS-vmin&vmax单位

本文解释了vmin和vmax在网页或应用程序设计中的单位概念,它们分别基于视口的最小和最大尺寸计算,且独立于父级元素。作者强调了在实际应用中考虑视口大小和兼容性测试的重要性。
摘要由CSDN通过智能技术生成

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值