css中vh/vw与%的区别

最新推荐文章于 2025-05-26 17:23:59 发布
最新推荐文章于 2025-05-26 17:23:59 发布
阅读量1.3k 收藏 1
点赞数 1
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_39423672/article/details/127869755
版权
vh与vw是CSS中用于响应式布局的单位，它们分别代表视口高度和宽度的百分比。1vh等于视口高度的1%，1vw等于视口宽度的1%。与百分比单位的区别在于，vh/vw基于窗口尺寸，而%基于父元素尺寸。在使用flex布局且子元素内容溢出时，vh能有效避免%计算高度失效的问题。因此，vh常用于需要根据窗口大小动态调整元素尺寸的场景。

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

1. vh 与 vw 的区别

vh 与 vw 都是根据窗口大小比例适应显示，

1vw = 窗口宽度的1%
1vh = 窗口高度的1%

vh 与 vw 差别仅在宽度或者高度

2. vh 与 vw 的与%区别

%为相对于父元素尺寸的比例

vh / vw 与 %的区别在于，一个针对窗口计算，一个针对父元素计算

3. 使用vh的情景

当使用flex布局时，flex:1自动占满剩余空间时，当子内容溢出，会导致%计算高度失效崩溃，此时就需要用vh来控制

CSS3中的vw和vh单位 - 编程指南
2301_79326559的博客
09-23 386
在CSS3中，vw和vh单位提供了一种相对于浏览器视窗大小的百分比单位。它们可以用于创建响应式的布局和样式，使得元素的大小可以根据视窗尺寸自动调整。通过使用vw和vh单位，我们可以更轻松地开发适应不同屏幕大小的网页。希望本文对你理解vw和vh单位有所帮助！
css 总结日常工作用到的 px / % / rem / em / vh / vw 尺寸单位
Thinking anywhere anytime.
12-12 545
css 关于尺寸单位 px / rem / em / vh / vw
VW、VH、%的区别和作用以及应用场景
m0_74359467的博客
10-17 1360
%呢他是根据父元素进行定位的，所以你这个项目在你的电脑上是完美的，但是到了别人的电脑上就会出现样式混乱崩塌的效果。所以一般呢再写可视化的时候尽量全用VW和VH，这样你的样式放在任何电脑上都不会出现样式崩塌混乱的样子。：如果是随着父容器或者是整体页面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置。相对长度单位：相对于父元素的百分比值，若父元素宽高改变，子元素会随之改变。如果有哪里说的不对的地方，请多多指教大家一起加油，共同学习！：VH和VW的查究仅次于一个是在于宽度，一个在于高度。
Web 开发日常记录（二）——VUE3中vh与%的区别
tsc0829的博客
05-09 265
一、背景笔者通过从0开始完成整个Web页面来学习Java和Vue3.开发主页面时发现，app部分没有填满整个屏幕，css设置如下。了解后发现100vh与100%在使用时有很大的区别。
css height:单位 % 高度 跟vh高度区别
m0_37678007的博客
01-09 1409
以上内容来自：[chatgpt中文网][https:bk.suning.info]
今天又学一招 vh和%的区别 vh的妙用
weixin_43958820的博客
07-07 8560
vh和%的区别 vh的妙用 vh与%的区别 vh是长度单位, vh是根据浏览器视口的高度变化; vw则是根据浏览器视口的宽度变化, 视口就是浏览器的可视区域 把浏览器可视区宽高平均分成100份, 那1vh就是可视区高1/100, 1vw就是可视区宽的1/100, 所以最好的上限设置就是100vh或100vw, 这个看个人需要 %是根据父盒子或根元素的宽高, 来进行百分比宽高显示, 父盒子变化, %等比变化 vh的用法之一 容器滚动条 当盒子的宽高设置了vh和vw后, 并把盒子设置overflow:
CSS之vw,vh视口单位与%的区别
热门推荐
bidang3275的博客
07-11 1万+
CSS中的vw,vh单位是什么？ vw：浏览器可见视口【宽度】的百分比（1vw代表视窗【宽度】的1%） vh：浏览器可见视口【高度】的百分比（1vw代表视窗【高度】的1%） vmin：当前 vw 和 vh 较小的一个值。 vmax：当前 vw 和 vh 中较大的一个值。 注：视窗 与 可见视口 是一个意思 vw,vh与 % 的区别是什么？ % 是基于【父元素】的宽度/高度的百分比，vw，vh是根据视窗的宽度/高度的百分比。 视口单位优势在于【vh】能够直接获取高度，而用 % 在没有设置 body
纯css3使用vw和vh实现自适应的方法
09-24
【纯CSS3使用vw和vh实现自适应的方法】 在网页设计中，自适应布局是确保内容在不同设备上都能良好展示的关键。CSS3引入了一种新的解决方案，即使用`vw`和`vh`单位，来简化响应式设计的实现过程。`vw`和`vh`单位基于...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
理解CSS常见的px/em/rem/vh/vw尺寸单位
Wion Wan
03-25 817
最近在做手机端和PC端的项目，用到了CSS单位的问题，于是想着空下来把CSS单位部分的知识自己写写CSS梳理一下； CSS中常见的单位 px–最常见的，页面按照精准样式展示;属于绝对单位； em–基准点为父节点字体的大小，如果自身定义了font-size按自身来计算；也就是说这个em不是一个固定值，属于相对单位； rem–相对单位，r可以看作为 ”root“,结合em，理解为相对根节点HTML的...
【高频考点精讲】CSS单位全解析：px、em、rem、vw/vh、%这些单位到底什么时候用？
最新发布
全栈老李的博客
05-26 773
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们来聊聊CSS中那些让人又爱又恨的单位。作为前端工程师，每天都要和这些单位打交道，但你真的了解它们吗？px、em、rem、vw/vh、%这些单位，用对了事半功倍，用错了可能就要加班调样式了。（全栈老李友情提示）
vw和%的区别（大厂面试）
yigeyangzhuren的博客
06-11 527
面试题
px、em、rem、%、vw、vh、vm等单位有什么区别？
weixin_34006965的博客
12-26 1158
这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【px、em、rem、%、vw、vh、vm等单位有什么区别？】 px、em、rem、%、vw、vh、vm等单位有什么区别？ 大家好，我是IT修真院西安分...
CSS尺寸单位px、em、rem、vw、vh以及%的区别
火星基地
10-15 2529
1. px px是像素单位。它是代表显示器上每一个显示的像素点，根据用户屏幕显示器的分辨率决定。 2. em em为相对单位，相对于当前元素内文本的字体尺寸。如果当前元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准。 例如，当前元素设置了字体尺寸为24px，那么2em就代表48px。 3. rem rem为相对单位，相对于<HTML>元素文本的字体尺寸。如果<HTML>元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准。 例如，<HTML>元素设置了字体尺寸为24p
vh，vw，px，%有什么区别
2301_79265530的博客
11-28 1029
这意味着元素的宽度将根据其内部内容的大小来确定，并且会占据剩余可用空间。如果没有设置父容器的宽度限制，元素的宽度将默认为100%。时，元素的宽度可能会受到父容器的限制或其他样式的影响，例如边框、内边距、外边距等。此外，如果父容器没有具体的宽度值（例如未设置宽度或使用百分比作为宽度），那么。这意味着元素的宽度将填满父容器的可用空间，无论内部内容的大小如何。vh、vw、px和%都是用于设置CSS的长度单位，它们各自有不同的特点和使用场景。所以，这两个属性的主要区别在于宽度的计算方式和占据空间的方式。
html %与vw的区别
weixin_43639743的博客
09-09 2559
%单位 %（百分比）是一个相对长度单位，相对于包含块（containing block）的高宽或字体大小来取值。 关于包含块（containing block）的概念，不能简单地理解成是父元素。 如果是静态定位和相对定位，包含块一般就是其父元素。 如果是绝对定位的元素，包含块应该是离它最近的 position为非static属性的祖先元素。 如果是固定定位的元素，它的包含块是视口（viewport）。 vw单位 vw、vh、vmin、vmax是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。
CSS（一）vw、vh、%、px、rem的区别和使用场景
qq_47627886的博客
04-28 892
vw、vh是相对于视窗的单位，是相对单位。 1vw相当与视窗宽度的1/100,1vh相当与视窗高度的1/100 对宽度设置时%>vw，对高度设置时vh>% 可以参考下面的一篇文章 对字体进行设置大小时，使用rem可以使字体大小跟随界面大小的改变二改变。 rem是相对于页面根元素html的大小来计算的。 页面font-size默认是16px，可以通过下面来转换 ...
vw/vh 与 百分比的区别
源辰_付鹏程
05-29 2475
首先，vw与vh是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。 视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。 vh和vw是要优于rem的，但是兼容性比较差，建议PC端可以优先使用 百分比就不多解释了，都明白，那么来看看区别 首先，vw，在浏览器没有横向滚动条的时候，vw和百分比，没多少区别，可能唯一的区别在于，百分比依赖父级大小，而vw没有，vw的浏览
CSS单位之vw、vh、vmin、vmax、%
时光清浅处，一步一安然
02-14 4089
视窗(Viewport)是指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。position:absolute时，将相对于其相对的元素宽度（递归父元素直到第一个设置了position的元素）。注意：position:fixed时，无论当前元素放在哪里，将相对于窗口宽度。1vh 等于1/100的视窗高度，1vw 等于1/100的视窗宽度。下面通过一个例子来说明。下面是用一个例子来说明。
CSS3新单位vw/vh/vmin/vmax深度解析与应用
"这篇文章主要探讨了CSS3中的新单位vw、vh、vmin和vmax，这些单位基于视窗尺寸进行动态调整，适用于创建响应式布局。vw表示视窗宽度的百分比，vh表示视窗高度的百分比，vmin是两者中较小值的百分比，vmax则是两者中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值