我是靠谱客的博主 瘦瘦花瓣,最近开发中收集的这篇文章主要介绍css中的vw是什么,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

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

css中的vw是什么

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

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

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

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

13.png

示例代码:

h1{font-size:8vw;}
登录后复制

如果视口的宽度是200mm,那么上述代码中h1元素的字号将为16mm,即(8x200)/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>
登录后复制

输出结果:

14.png

(学习视频分享:css视频教程)

以上就是css中的vw是什么的详细内容,更多请关注靠谱客其它相关文章!

最后

以上就是瘦瘦花瓣为你收集整理的css中的vw是什么的全部内容,希望文章能够帮你解决css中的vw是什么所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(84)

评论列表共有 0 条评论

立即
投稿
返回
顶部