vmin 和 vmax的区别

zhaojiaxing123

已于 2023-10-19 14:56:27 修改

阅读量1.2k

点赞数

文章标签：前端 vmin vmax

于 2023-04-11 18:49:26 首次发布

本文链接：https://blog.csdn.net/zhaojiaxing123/article/details/130090683

版权

vmin和vmax是CSS单位，用于响应式设计。vmin是vw和vh中较小值，vmax是较大值。在移动页面开发中，使用vmin确保元素在横竖屏下按较短边比例缩放，而vmax按较长边比例缩放，有助于保持布局一致性。

摘要由CSDN通过智能技术生成

vmin 和 vmax的区别

vmin是当前 vw 和 vh 中较小的一个值，vmax是当前 vw 和 vh 中较大的一个值。

做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 50vw），在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

如果我们的宽高都设置成50vw和50vh的话

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 50vw;
            height: 50vh;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

那么它的样式就是
在这里插入图片描述

我们可以看到它的宽高并不是一样的，这时我们就需要借助vmin和vmax

如果我们使用vmin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 50vmin;
            height: 50vmin;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

它的效果图就是
在这里插入图片描述
它是以最最短一边变成一个正方形，而使用vmax就是以最长的一边变成一个正方形

例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 50vmax;
            height: 50vmax;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>