CSS之vw,vh视口单位与%的区别

最新推荐文章于 2025-04-11 08:15:00 发布

Ocean_HL

最新推荐文章于 2025-04-11 08:15:00 发布

阅读量1.4w

点赞数 15

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/bidang3275/article/details/118657801

版权

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文解析了vw和vh在CSS中的作用，它们是视窗宽度和高度的百分比单位，与百分比的区别在于视口尺寸。通过实例说明了如何使用100vh使body高度等于视口，并展示了视口单位在响应式设计中的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS中的vw,vh单位是什么？

vw：浏览器可见视口【宽度】的百分比（1vw代表视窗【宽度】的1%）
vh：浏览器可见视口【高度】的百分比（1vw代表视窗【高度】的1%）
vmin：当前 vw 和 vh 较小的一个值。
vmax：当前 vw 和 vh 中较大的一个值。

注：视窗 与 可见视口 是一个意思

vw,vh与 % 的区别是什么？

% 是基于【父元素】的宽度/高度的百分比，vw，vh是根据视窗的宽度/高度的百分比。
视口单位优势在于【vh】能够直接获取高度，而用 % 在没有设置 body 高度情况下，是无法正确获得可视区域的高度。

实例之让body元素与浏览器的可见视口一样高

body {
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 100vh让body的高度与视口一样高 */
    height: 100vh;
    /* margin + overflow 用于隐藏body外边距造成的滚动条 */
    margin: 0;
    overflow: hidden;
}