vmin 和 vmax的区别

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>Documenttitle>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 50vw;
            height: 50vh;
            background: red;
        }
    style>
head>
<body>
    <div class="box">

    div>
body>
html>

那么它的样式就是
vmin 和 vmax的区别_第1张图片

我们可以看到它的宽高并不是一样的,这时我们就需要借助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>Documenttitle>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 50vmin;
            height: 50vmin;
            background: red;
        }
    style>
head>
<body>
    <div class="box">

    div>
body>
html>

它的效果图就是
vmin 和 vmax的区别_第2张图片
它是以最最短一边变成一个正方形,而使用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>Documenttitle>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .box{
            width: 50vmax;
            height: 50vmax;
            background: red;
        }
    style>
head>
<body>
    <div class="box">

    div>
body>
html>```
![在这里插入图片描述](https://img-blog.csdnimg.cn/b68fdf608faa474b8ebb050ff0e451e1.png)

你可能感兴趣的:(前端,vmin,vmax)