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>