CSS3视窗单位vw、vh、vmin、vmax说明

以你之姓@ 2022-05-13 22:09 246阅读 0赞

原文出处：[https://blog.csdn.net/lecepin/article/details/54178095][https_blog.csdn.net_lecepin_article_details_54178095]

vw、vh做为CSS3中的新单位，已经出来挺久的了，这里也我个人也做一下详细的总结。

--------------------

## 说明 ##

`vw`、`vh`、`vmin`和`vmax`是CSS3中的新单位，是一种视窗单位，也是相对单位。它们的大小都是由视窗大小来决定的，单位`1`，代表类似于`1%`。具体描述如下：

`vw`：视窗宽度的百分比  
`vh`：视窗高度的百分比  
`vmin`：当前较小的vw和vh  
`vmax`：当前较大的vw和vh

视窗，指的是浏览器可视区域的宽高，也就是`window.innerWidth/window.innerHeight`。`1vw`就是`1%`的浏览器的宽度。`100vw`就是整个视窗的宽度。

如下图：

![SouthEast][]

--------------------

## vmin、vmax用处 ##

`vmin`和`vmax`是当前较小的`vw`和`vh`和当前较大的`vw`和`vh`，看一下下面场景：

![SouthEast 1][]

当设置字体为`5vw`时，竖屏和横屏状态下显示的字体大小是不一样的，为了保持一致，这里就可以用到`vmin`和`vmax`来进行确认了。

--------------------

## 与`%`百分比的区别 ##

`%` 是相对于父元素的大小设定的比率，`vw` 是视窗大小决定的。  
其实这些视窗单位与`%`使用基本类似，优势在于能够直接获取高度，而用`%`在没有设置`body`高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

--------------------

## 兼容性 ##

移动设备上兼容没问题。

![SouthEast 2][]

--------------------

> 博客名称：[王乐平博客][Link 1]
> 
> 博客地址：[http://blog.lepingde.com][Link 1]
> 
> CSDN博客地址：[http://blog.csdn.net/lecepin][http_blog.csdn.net_lecepin]

[https_blog.csdn.net_lecepin_article_details_54178095]: https://blog.csdn.net/lecepin/article/details/54178095
[SouthEast]: /images/20220514/86dd32cc383a4574872c5d0a3abae77d.png
[SouthEast 1]: /images/20220514/121f8a3956e94d23bad6b9773acd00b2.png
[SouthEast 2]: /images/20220514/60b9963611e34ce1b6b1a1dce1a24243.png
[Link 1]: http://blog.lepingde.com/
[http_blog.csdn.net_lecepin]: http://blog.csdn.net/lecepin