视区相关单位vw, vh..简介以及可实际应用场景

最新推荐文章于 2025-06-23 10:59:42 发布
转载 最新推荐文章于 2025-06-23 10:59:42 发布 · 477 阅读 · 0

本文详细介绍了新的视窗相对单位vw、vh等的基本概念及其使用方法，这些单位可以让网页元素大小随视窗变化而变化，有助于实现响应式布局。
【高频考点精讲】CSS 中的单位解析：px、em、rem、vw、vh 的使用场景
全栈老李的博客
05-14 1119
🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们聊聊CSS中那些让人又爱又恨的单位——px、em、rem、vw、vh。作为前端工程师，这些单位就像厨房里的调味料，用对了能让页面美味可口，用错了...嗯，你懂的。（全栈老李友情提示：文末有面试题彩蛋，记得看到最后哦～）
视区单位vw, vh简介以及可实际应用场景
qq_43477721的博客
10-26 2467
基本概念 vw和vh：视口单位中的“视口”，桌面端指的是浏览器的可视区域，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。1vw等于视口宽度的1%。1vh等于视口高度的1%。 vmin和vmax：vmin为当前vw 和vh中较小的一个值；vmax为较大的一个值。 怎么证明 你猜 是浏览器内部宽度大小(window.innerWidth)？是整个浏览器的宽度大小(window.outerWidth)？还是显示器的宽度大小(screen.width)？ 上代码 <!DOCTYPE html>.
移动端的vh 和 vw简介和使用场景
weixin_30569153的博客
10-12 403
vw 相对于视窗的宽度：视窗宽度是100vw；vh则类似，是相对于视窗的高度，视窗高度是100vh. 这里的视窗指的又是啥？ 是浏览器内部宽度大小(window.innerWidth)？ 是整个浏览器的宽度大小(window.outerWidth)？ 还是显示器的宽度大小(screen.width)？ “视区”所指为浏览器内部的可视区域大小，即window.inn...
[css] 请说说你对vh、vw的理解以及它们的运用场景是什么？
歌谣的博客
02-14 571
[css] 请说说你对vh、vw的理解以及它们的运用场景是什么？ vw: 100vw为视窗的宽度，即1vw是视窗宽度的1% vh: 100vh为视窗的高度，即1vh是视窗高度的1% 运用场景 图片查看大图：img { max-height: 90vh; } 代替rem实现移动端布局 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
前端开发中vw和vh相对单位的理解与应用
02-11
具体介绍了vw/vh的基本概念，与百分比单位的不同之处，以及如何将固定像素值转换为vw或vh值。通过对一个具体案例（即50px * 50px的方框，在iPhone678的设计稿下转成vw表示）来进行实操演示，帮助读者更好地理解和...
CSS3视窗单位vw、vh、vmin、vmax详解与应用
某些移动浏览器为地址栏预留的空间也会动态改变视窗高度，造成100vh实际超出可见区域的问题，此时可通过JavaScript获取真实可视高度或改用其他布局方式规避。综上所述，vw、vh、vmin、vmax作为CSS3的重要革新，不仅...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
本文将详细解析px、em、rem、%、vw和vh这些单位的区别及其应用场景。 1. **px (像素)**: 像素是绝对长度单位，它基于屏幕的物理分辨率。1px表示设备上的一点，通常用于创建精确的图形或保持元素大小恒定。由于px是...
前端大厂最新面试题-em_px_rem_vh_vw.docx
06-06
前端大厂最新面试题-em_px_rem_vh_vw 以下是对前端大厂最新面试题-em_px_rem_vh_vw的知识点详细解释： ...不同的单位有其特点和应用场景。我们需要根据不同的场景选择合适的单位，以便更好地实现我们的设计和布局。
VW、VH、%的区别和作用以及应用场景
m0_74359467的博客
10-17 1491
%呢他是根据父元素进行定位的，所以你这个项目在你的电脑上是完美的，但是到了别人的电脑上就会出现样式混乱崩塌的效果。所以一般呢再写可视化的时候尽量全用VW和VH，这样你的样式放在任何电脑上都不会出现样式崩塌混乱的样子。：如果是随着父容器或者是整体页面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置。相对长度单位：相对于父元素的百分比值，若父元素宽高改变，子元素会随之改变。如果有哪里说的不对的地方，请多多指教大家一起加油，共同学习！：VH和VW的查究仅次于一个是在于宽度，一个在于高度。
em，px，rem，vh，vw使用场景和区别
最新发布
2202_75695913的博客
06-23 573
前端开发中常用CSS单位各有特点：px是绝对单位，适合固定尺寸；em基于父元素字体大小，适合局部调整；rem基于根元素字体大小，推荐全局布局；vw/vh根据视口宽高百分比变化，适合全屏设计。实践建议：固定元素用px，局部调整用em，全局布局用rem，响应式全屏用vw/vh，通过合理组合实现灵活适配多设备的页面效果。（148字）
vw vh rpx的区别及应用场景
小柒的博客
04-13 6113
vw vh 这两个单位为根据当前设备可视区的宽高为基准动态计算当前元素的宽高，可以实现当前元素在不同宽高的可视区下以不同的px展现 rpx根据当前设备可视区的宽为基准动态计算当前元素的px的展现 vw和rpx一样，他们底层都是动态换算宽度，以前以为rpx可以动态换算高度，这里的误区纠正，rpx不能根据当前设备的可视区的高度动态计算高度 rpx设置高度的原理为根据当前设备的可视区的宽度动态计算高度...
CSS3视口单位vw,wh
anlou1537的博客
08-06 254
vw和vh是视口（viewport units）单位，何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，是不是很神奇，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。 vw是可视窗口的宽度单位，和百分比有点一样，1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw = 18px。和百分比不一样的是，vw始终相对于可视窗口...
视区相关单位vw, vh
levinhax的博客
08-04 649
vw，是指CSS中相对长度单位，表示相对视口宽度（Viewport Width），1vw = 1% * 视口宽度 vh，是指CSS中相对长度单位，表示相对视口高度（Viewport Height），1vh = 1% * 视口高度示例代码 :p{ font-size: 15vw; }如果视口的宽度是200mm，那么上述代码中p元素的字号将为30mm，即(15x200)/100，随着视口的变化
视口单位：vw，vh，vmin，vmax（表示再也不想用rem了！）
diaoshenyu7763的博客
02-03 198
百分比布局： html, body { height: 100%; } .sidebar { height: 100%; width: 100%; } 为什么html和body需要高度？百分比是相对于其父属性。当父级的高度由它的子级定义时，没有已知的高度设置，因此高度被完全忽略。这意味着你必须在DOM树中的每个父元素上设置高度。你也可以使用新的视口...
css 尺寸单位（px，%，em，rem，vh，vw）的区别及应用场景
liora6的博客
06-17 3906
em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸特点：   1. em的值并不是固定的   2. em会继承父级元素的字体大小场景使用：为了字体大小的可维护性和伸缩性，推荐使用em，如果存在3层以及3层以上的字体相对尺寸的设置，可以考虑使用rem。vw：表示视口的宽度，我们把视口分成100份，1vw就表示当前视口宽度的百分之一；vh：表示视口的高度，1vh就表示当前视口高度的百分之一；vmin：表示在vw与vh
vw\vh的介绍
Be myself
03-06 4776
vw\vh的介绍？ 1.什么事vw(Viewport Width)和vh（Viewport Height）？ 1.1 vw和vh是前端开发中的一个动态单位，是一个相对于网页视口的单位。 1.2 系统会将视口的宽度和高度分为100份，1vw占用视口宽度的百分之一，1vh占用视口高度的百分之一。 1.3 vw、vh和百分比不同的是，百分比永远都是以父元素为参考，而vw、vh是以视口作为参考。 结论：vw、vh是一个动态的单位，会随着视口的变化而变化（相对单位）。 2.什么是v...
Vh和Vw的简介和使用
热门推荐
tian361zyc的博客
05-23 1万+
Vw和Vh
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值