css中的vw是什么(在css中实现width:100%)-风君雪科技博客

本教程操作环境：windows10系统、CSS3&&HTML5版本、Dell G3电脑。

css中的vw是什么

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

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

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

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

css中的vw是什么(在css中实现width:100%)-风君雪科技博客

示例代码：

h1{font-size:8vw;}

登录后复制

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

示例如下：

<html>
<style>
.p1{font-size:5vw;}
.p2{font-size:5px;}
</style>
</head>
<body>
<p class="p1">相对于viewport宽度大小的文字</p>
<p class="p2">px宽度大小的文字</p>
</body>
</html>

登录后复制

输出结果：

css中的vw是什么(在css中实现width:100%)-风君雪科技博客

（学习视频分享：css视频教程）

以上就是css中的vw是什么的详细内容，更多请关注风君子博客其它相关文章！