CSS-vmin&vmax单位

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、付费专栏及课程。

余额充值