px,%,vw,vh和区别和联系

最新推荐文章于 2025-06-05 11:45:31 发布
最新推荐文章于 2025-06-05 11:45:31 发布
阅读量3.4k 收藏 5
点赞数 3
CC 4.0 BY-SA版权
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/shaloker62426/article/details/98047551

width：100%；
height：100%
百分比的高和宽是相对于父元素而言的，而vw和vh是相对于视口（viewport）而言的

vw（视口宽度）
vh（视口高度）
视口 就是字面意思，你显示器的屏幕大小。在pc端的时候，视口是你显示屏的大小；在手机端的时候，视口就是你手机屏幕的大小，在你将手机横放的时候，100vw和100vh也会自适应变成新的高和宽。

为什么在设置了100vw后，在电脑上看自己的页面还是有横向的滚动条？
因为视口是包含了滚动条的高度和宽度的。在你给父元素的div设置了固定的高和宽（px）时，如果这个 px超过了你的屏幕大小，就会出现滚动条。

所以，在有滚动条的时候，100vw会比width：100%宽

在适配不同显示屏的时候，可以配合着使用px，%，vh，vw

shaloker62426
关注
VW、VH、%的区别和作用以及应用场景
m0_74359467的博客
10-17 1430
%呢他是根据父元素进行定位的，所以你这个项目在你的电脑上是完美的，但是到了别人的电脑上就会出现样式混乱崩塌的效果。所以一般呢再写可视化的时候尽量全用VW和VH，这样你的样式放在任何电脑上都不会出现样式崩塌混乱的样子。：如果是随着父容器或者是整体页面布局而改变尺寸，则使用%更好，如元素的高度和宽度设置。相对长度单位：相对于父元素的百分比值，若父元素宽高改变，子元素会随之改变。如果有哪里说的不对的地方，请多多指教大家一起加油，共同学习！：VH和VW的查究仅次于一个是在于宽度，一个在于高度。
vh和vw
langrentao的博客
03-07 501
vh:相对于视窗的高度，那么vw:则是相对于视窗的高度
em/px/rem/vh/vw区别
最新发布
2302_76925238的博客
06-05 216
remcss复制编辑rem = px / html 的 font-size例：html 设置为20px，则。
vw和vh
weixin_45899362的博客
03-06 9948
1.基本概念 vw/vh是一个相对单位（类似于em,rem) vw：viewport width 视口宽度单位 vh：viewport height 视口高度单位 相对视口的尺寸计算结果 1vw = 1/100视口宽度 1vh = 1/100视口高度 注意：和百分比是有区别的，百分比时相对于父元素来说得，而vw和vh总是针对于视口来说的。 2.使用vw 开发设计中使用vw，需要使用像素大厨将模式改为2X 使用vw，还原设计稿需要做 确定设计稿视口宽度。如375 直接使用测量数值/（视口宽度/
Css单位px，rem，em，vw，vh的区别
ZhiShiCaiFu的博客
03-31 477
px px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对与屏幕分辨率而言的。 这就是为啥我们在项目中使用px作为单位，在各种设备上也不会发生比例失调的原因 em em是相对长度单位。相对当前节点的字体大小（font-size）。如果本节点没有font-size，那么就取父节点的。 em适用于小区域的环境 rem rem是CSS3新增的一个相对单位，rem是相对HTML根元素()的字体大小(font-size)来计算长度单位的 html{font-size: 20px } d
css height:单位 % 高度 跟vh高度区别
m0_37678007的博客
01-09 1452
以上内容来自：[chatgpt中文网][https:bk.suning.info]
web前端CSS之“px、em、rem、%、vw、vh单位”区别
空投在我怀里的博客
05-29 3580
1 、px px就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。 2、em 参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。 字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body：16px*1.5em = 24px class为id2的div字体大小继承自父元素id1：24px*1.5em = 36px class为id3的div字体
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
ybh756784818的博客
04-08 3698
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
vw /vh
MDR_0820的博客
10-13 259
vw 、vh 是一个相对单位 （类似em 和 rem相对单位） vw 是 viewport width 视口宽度单位 vh 是 viewport hight 视口高度单位 相对视口的尺寸计算结果 1vw=1%（百分之1）视口宽度 1vh=1%(百分之1） 视口高度 注意 vw 、vh 是和百分比有区别的 百分比是相对父级的 而vw vh 是针对于当前视口的 ...
css尺寸单位px、em、rem、vh/vw的区别是什么？
weixin_43273592的博客
07-14 428
如果HTML元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准例如，HTML元素设置了字体尺寸为 25px ，那么 2rem 就代表 50px.em是相对单位，相对于当前元素内文本的字体尺寸。如果当前元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准例如，当前元素设置了字体尺寸为 18px ，那么 2em 就代表 36px。vw 和 vh 是相对单位，相对于当前视口。vh是相对当前视口的高，vw是相对当前视口的宽。例如，20vw 代表当前视口宽度的 20%，30vh 代表当前视口高度的 30%
px，em，rem，vw，vh之间的区别
Mxy18851251178的博客
01-07 544
例如：现在在你电脑上一个字为16px，大小正好，可能到比你分辨率要高的电脑上，字体16px大小不变，但是分辨率有变化，导致字体在别的电脑上可能会导致不适配的情况发生。四，vw（视窗宽度单位）：vw是相对于视窗宽度的百分比单位，1vw等于视窗宽度的1%。例如：这个就很好理解，就是1em就是父元素的一整个字体大小，当然，嵌套的多了容易搞混，尽量不要在嵌套多个元素的时候使用em，个人认为不太好用。五，vh（视窗高度单位）：vh类似于vw，不同之处在于它是相对于视窗高度的百分比单位，1vh等于视窗高度的1%。
CSS（一）vw、vh、%、px、rem的区别和使用场景
qq_47627886的博客
04-28 904
vw、vh是相对于视窗的单位，是相对单位。 1vw相当与视窗宽度的1/100,1vh相当与视窗高度的1/100 对宽度设置时%>vw，对高度设置时vh>% 可以参考下面的一篇文章 对字体进行设置大小时，使用rem可以使字体大小跟随界面大小的改变二改变。 rem是相对于页面根元素html的大小来计算的。 页面font-size默认是16px，可以通过下面来转换 ...
web前端长度单位详解（px、em、rem、%、vw/vh、vmin/vmax、vm、calc()）
热门推荐
qq_41913971的博客
12-27 1万+
web前端常用长度单位 1. px 像素（Pixel） 相对长度单位。相对于显示器屏幕分辨率而言 2. em 相对长度单位。相对于当前对象内文本的字体尺寸。若当前对象内文本字体尺寸未被设置，则相对于浏览器默认的字体尺寸。指的是字符宽度的倍数。 3. rem 相对长度单位。css3新增，相对于HTML根元素。只要修改根元素就可以成比例的调整所有字体大小，还可以避免字体大小逐层复合的连锁反应。兼容性：...
CSS 中px、%、vh、vw、em、rem、vmin、vmax单位之间的区别详解
Black_Spider_Man的博客
12-17 368
【代码】CSS 中px、%、vh、vw、em、rem、vmin、vmax单位之间的区别详解。
解密CSS单位：px、em、vh的区别与应用
todoitbo的博客
04-09 2957
本文将深入探讨CSS中常用的单位px、em、vh的区别与应用场景。我们将详细解释这些单位的特点，以及在实际开发中如何选择合适的单位来实现设计需求。
CSS尺寸单位px、em、rem、vw、vh以及%的区别
火星基地
10-15 2539
1. px px是像素单位。它是代表显示器上每一个显示的像素点，根据用户屏幕显示器的分辨率决定。 2. em em为相对单位，相对于当前元素内文本的字体尺寸。如果当前元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准。 例如，当前元素设置了字体尺寸为24px，那么2em就代表48px。 3. rem rem为相对单位，相对于<HTML>元素文本的字体尺寸。如果<HTML>元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准。 例如，<HTML>元素设置了字体尺寸为24p
前端单位 px、vw、vh 等的区别与使用场景
小河先森的博客
12-30 2133
在前端开发中，CSS中的长度单位至关重要，不同单位适用于不同的布局场景。以下是对常见单位的详细解析和使用建议。，表示屏幕上的物理像素点，精确且固定。无论屏幕分辨率或设备尺寸如何，，基于视口（viewport）的宽度。1vw 等于视口宽度的 1%。**vmin：**视口宽度和高度中较小的那个值的 1%。**vmax：**视口宽度和高度中较大的那个值的 1%。1vh 等于视口高度的 1%。计算，1rem 等于根元素字体大小的 1 倍。
CSS单位px，rem，em，vw，vh的区别
Bald_monster的博客
10-09 479
CSS单位px，rem，em，vw，vh的区别 1、px是什么 px就是像素，也是我们现在经常使用的基本单位。px就是一张图片最小的一个点，一张位图就是千千万万这样的点构成的，比如常常听到的电脑像素是1024×768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。使用px时，页面按精准像素展示。 2、什么是em？ 相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值 3、什么是rem？ 相对单位，可理
rpx px em rem % vh vw的区别
06-28
rpx是小程序中的单位，可以根据屏幕宽度进行自适应缩放，适用于小程序开发。 px是像素单位，是网页开发中最常用的单位，不具有自适应性。...vh和vw是相对于视口高度和宽度的单位，适用于网页开发中的响应式布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值