我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

很多年前,苏南大叔安装了一个wordpress的主题的时候,第一次接触到了vwvh这个新的css尺寸单位。在本文中,苏南大叔就来说一下对于这两个css尺寸单位的一些理解。

苏南大叔:css布局,如何理解宽度单位vw和高度单位vh? - css宽度单位vw-vh
css布局,如何理解宽度单位vw和高度单位vh?(图5-1)

苏南大叔的程序如此灵动博客,记录苏南大叔的计算机代码所学所想。测试环境:火狐浏览器。

基本理解

vwvh都是以浏览器的可视区域为基准的,每个vw值和vh值的实际值都是可变的。

尺寸说明
100vw一个完整的可视宽度,实际上是个变值(拖动窗口宽度可显示变化),类似 width:100%
1vw可视宽度的百分之一
100vh一个完整的可视高度,实际上是个变值(拖动窗口高度可显示变化),类似 height:100%
1vh可视高度的百分之一

width:100vw对比width:100%

当【存在滚动条】的时候,width:100vw的实际尺寸【大于】width:100%的实际尺寸。
当【不存在滚动条】的时候,width:100vw的实际尺寸【等于】width:100%的实际尺寸。

苏南大叔:css布局,如何理解宽度单位vw和高度单位vh? - 对比1
css布局,如何理解宽度单位vw和高度单位vh?(图5-2)

苏南大叔:css布局,如何理解宽度单位vw和高度单位vh? - 对比2
css布局,如何理解宽度单位vw和高度单位vh?(图5-3)

测试例子

本例中,增加了竖直高度的设置,使其自然出现竖直滚动条。观察width:100vw对比width:100%的效果,可以发现:

  • width:100vw 出现了水平滚动条。
  • width:100% 依然没有水平滚动条。

苏南大叔:css布局,如何理解宽度单位vw和高度单位vh? - 对比3
css布局,如何理解宽度单位vw和高度单位vh?(图5-4)

苏南大叔:css布局,如何理解宽度单位vw和高度单位vh? - 对比4
css布局,如何理解宽度单位vw和高度单位vh?(图5-5)

所以,结论就是:

  • width:100vw指的确实就是视窗的宽度,无视滚动条的宽度存在。而width:100%指的是可用宽度减去滚动条的宽度。
  • 使用vw或者vh的时候,最好不要出现滚动条,比较不符合预期。

结束语

更多css相关经验文字:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css