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

2024-05-24 23:34:47

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就是整个视窗的宽度。

如下图：

vmin、vmax用处

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

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

与`%`百分比的区别

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

兼容性

移动设备上兼容没问题。

博客名称：王乐平博客

博客地址：http://blog.lepingde.com

CSDN博客地址：http://blog.csdn.net/lecepin

CSS3视窗单位vw、vh、vmin、vmax说明相关推荐

单位vw,vh,vmin,vmax的用法
vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%) vh:视窗高度的百分比 vmin:当前 vw 和 vh 中较小的一个值 vmax:当前 vw 和 vh 中较大的一个值
【前端基础】整理常见的单位 px em rem % vw vh vmin vmax rpx
基本单位单位计算方式简介 px 标准像素优点兼容性最好,缺点没有弹性,对于过大过小屏幕显示效果不好 em font-size元素大小 1em等于font-size的大小(font-size默认 ...
20、CSS中单位：【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
CSS中的px 和 % px (pixels) 是固定单位,也可以叫基本单位,代表像素,可以确保元素的大小不受屏幕分辨率的影响. % (percentage) 是相对单位,代表元素大小相对于其父元素或 ...
CSS3新单位vw，vh，vmin，vmax详解
1,vw,vh,vmin,vmax是由视窗Viewport大小来决定的,单位1,代表1%,是一种相对单位,只要是为响应式适配视窗的一种解决方案: vw:view width(视窗宽度)的百分比,1vw ...
html 自适应单位vw,CSS3响应式自适应尺寸视窗单位vw、vh详解
vw.vh.vmin.vmax是CSS3新增的视窗单位,同时也是相对单位,它相对视窗(Viewport)大小的百分比. 什么是视窗? 视窗即Viewport,是浏览器实际显示内容的区域,不包括工具栏. ...
css3自适应布局单位vw,vh
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
css3自适应布局单位vw,vh你知道多少？
视口单位(Viewport units) 什么是视口? 在PC端,视口指的是在PC端,指的是浏览器的可视区域: 而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual V ...
css单位vw vh,css3自适应布局单位vw,vh详解
视口单位(Viewport units) 什么是视口? 在桌面端,视口指的是在桌面端,指的是浏览器的可视区域:而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Vi ...
css新单位 vw , vh
考虑到未来响应式设计的开发,如果你需要,浏览器的高度也可以基于百分比值调整.但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式,比如字体大小不会随着你窗口改变而改变,如今css3引入的新单 ...

最新文章

热门文章