css样式中的vw什么意思,css中vw是什么意思?

在css中,vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位的vw。

在css中,vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位的vw。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。

css样式中的vw什么意思,css中vw是什么意思?_第1张图片

CSS 单位是一种量度单位,包括尺寸单位和颜色单位。我们常使用向对单位,不会使得网页在不同的视图下造成布局混乱的情况。

vw是Viewport's width的缩写形式,1vw永远等于当前视口宽度的百分之一。vw是一种视窗单位,也是相对单位。相对于视口的宽度,视口被均分为100单位的vw。

vw优势在于能够直接获取宽度,而用 % 在没有设置 body 宽度的情况下,是无法正确获得可视区域的宽度的,所以这是挺不错的优势。

这里的视口指的是浏览器可视区域,图示如下:

css样式中的vw什么意思,css中vw是什么意思?_第2张图片

示例代码:h1{font-size:8vw;}

如果视口的宽度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/100

兼容性:

css样式中的vw什么意思,css中vw是什么意思?_第3张图片

示例:

p{font-size:5vw;}

相对于viewport宽度大小的文字

你可能感兴趣的:(css样式中的vw什么意思)