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>``` 
