今天又学一招 vh和%的区别 vh的妙用

最新推荐文章于 2024-01-09 11:12:36 发布
最新推荐文章于 2024-01-09 11:12:36 发布
阅读量7.3k 收藏 21
点赞数 5
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43958820/article/details/118544081
版权

vh和%的区别 vh的妙用

  1. vh与%的区别
    vh是长度单位, vh是根据浏览器视口的高度变化; vw则是根据浏览器视口的宽度变化, 视口就是浏览器的可视区域
    在这里插入图片描述

    把浏览器可视区宽高平均分成100份, 那1vh就是可视区高1/100, 1vw就是可视区宽的1/100, 所以最好的上限设置就是100vh或100vw, 这个看个人需要

    %是根据父盒子或根元素的宽高, 来进行百分比宽高显示, 父盒子变化, %等比变化

  2. vh的用法之一 容器滚动条
    当盒子的宽高设置了vh和vw后, 并把盒子设置overflow: auto; 就会发现浏览器可视变化,盒子也会变化的效果在这里插入图片描述
    在添加个隐藏滚动条::-webkit-scrollbar {display: none;}
    在这里插入图片描述
    更多用法大家可以再去探索

黄龙俊
关注
  • 5
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
浅析rem和em和px vh vw和% 移动端长度单位
09-24
下面小编就为大家带来一篇浅析rem和em和px vh vw和% 移动端长度单位。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
解密CSS单位：px、em、vh的区别与应用
最新发布
todoitbo的博客
04-09 1353
本文将深入探讨CSS中常用的单位px、em、vh的区别与应用场景。我们将详细解释这些单位的特点，以及在实际开发中如何选择合适的单位来实现设计需求。
详解CSS中视窗单位和百分比单位的使用
01-19
视窗(Viewport)单位 视窗(Viewport)单位是相对单位，意味着它们没有客观的尺寸。它们的大小是由视窗(Viewport)大小决定的。下面是四个与视窗(Viewport)有关的单位。 我将集中讨论前两个单位，因为它们更可能被使用。 在很多情况下，视口单位(vh和vw)和百分比单位在它们可以实现的功能方面是重叠的。然而，它们每个都有其明显的优点和缺点。概括的说:     当处理宽度的时候，%单位更合适。处理高度的时候，vh单位更好。 占满宽度的元素: % > vw 正如我所提到的，vw单位根据视窗的宽度决定它的大小。然而，浏览器是根据浏览器的窗口计算视窗大小的，包括了滚动条的空间。
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
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
橙-极纪元-cplvfx-JJY.Cheng
06-22 8849
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
css中vh/vw与%的区别
这是个问题
11-15 1131
vh与%的区别
css 尺寸单位（px，%，em，rem，vh，vw）的区别及应用场景
imcholl的博客
06-17 3377
em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸特点：   1. em的值并不是固定的   2. em会继承父级元素的字体大小场景使用：为了字体大小的可维护性和伸缩性，推荐使用em，如果存在3层以及3层以上的字体相对尺寸的设置，可以考虑使用rem。vw：表示视口的宽度，我们把视口分成100份，1vw就表示当前视口宽度的百分之一；vh：表示视口的高度，1vh就表示当前视口高度的百分之一；vmin：表示在vw与vh
vh和vw是什么单位？
热门推荐
HXR1984的博客
04-16 1万+
在css3中，vh和vw是视口单位，是相对长度单位。 文章目录前言一、视口单位（ Viewport units )1.在pc端2.在移动端二、常见单位及使用1.常见单位2.使用 前言 提示：以下所有内容，仅为个人经验总结，非专业解释 在学习css时，除了px像素，我们还经常遇到vh和vw这两个单位，那这两个单位具体是什么呢，怎么使用呢？ 一、视口单位（ Viewport units ) 想了解vh和vw，首先我们需要知道什么是视口。顾名思义，视口即为可视窗口。 分两种情况： 1.在pc端 视口指：p.
css height:单位 % 高度 跟vh高度区别
m0_37678007的博客
01-09 937
以上内容来自：[chatgpt中文网][https:bk.suning.info]
纯css3使用vw和vh实现自适应的方法
09-24
CSS3引入了一种新的解决方案，即使用`vw`和`vh`单位，来简化响应式设计的实现过程。`vw`和`vh`单位基于视口的尺寸，提供了更直观的方式来定义元素的尺寸，从而实现真正的跨设备自适应。 **视口单位的理解** 视口...
VH6501采样点测试误差及影响因素分析（官方文档）
02-25
VH6501是一款高精度的采样设备，用于各种复杂的信号测量和分析。官方文档深入探讨了在使用VH6501进行采样点测试时可能出现的误差及其影响因素，这对于理解和优化测试结果至关重要。以下是这些知识点的详细说明： 一...
行业资料-交通装置-一种VH型滑壳膨胀螺丝.zip
08-23
行业资料-交通装置-一种VH型滑壳膨胀螺丝.zip
CSS尺寸单位px、em、rem、vw、vh以及%的区别
火星基地
10-15 2374
1. px px是像素单位。它是代表显示器上每一个显示的像素点，根据用户屏幕显示器的分辨率决定。 2. em em为相对单位，相对于当前元素内文本的字体尺寸。如果当前元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准。 例如，当前元素设置了字体尺寸为24px，那么2em就代表48px。 3. rem rem为相对单位，相对于<HTML>元素文本的字体尺寸。如果<HTML>元素没有指定字体尺寸，那么以浏览器默认的字体尺寸为准。 例如，<HTML>元素设置了字体尺寸为24p
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
ybh756784818的博客
04-08 3521
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
前端必看！css中常用单位及区别
sdasadasds的博客
11-01 2387
作为一名前端开发人员，我们在编写css的时候常需要使用到单位，那么常用的单位有px、%、em、rem、vw、vh、vmin、vmax等，虽然有的是很常用的单位，但是他们代表的意义各不相同，让我们来了解一下他们之间的区别吧！2、em：相对于父元素的字号大小来计算值，当元素自身有字号大小时，则按照元素自身字号大小来计算值。4、vw：vw(viewpoint width)视口宽度，可以理解为整个屏幕宽为100vw，那么1vw = 视口宽度的1%，可以达到屏幕自适应。7、vmax：取vw和vh中较大的那一个的值。
CSS布局单位px % em rem vw vh的区别
weixin_50379372的博客
06-26 424
（2）百分比（%），当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。（4）vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。（3）em和rem相对于px更具灵活性，它们都是相对长度单位，它们之间的区别：em相对于父元素，rem相对于根元素。vw：相对于视窗的宽度，视窗宽度是100vw；vh：相对于视窗的高度，视窗高度是100vh；
css中px、em、rem、%、vw、vh、vm、rpx 这些单位的区别
qq_39951524的博客
10-22 1176
css中px、em、rem、%、vw、vh、vm、rpx 这些单位的区别
vw/vh：移动适配之vw/vh(使用方法)
weixin_46682277的博客
12-23 4618
使用vw/vh布局，可以实现视口宽度不同，网页元素宽高等比缩放效果，比rem的优势在于，在代码中直接写vw/vh就能实现移动适配效果，不用引入js文件，比rem更简单，但有兼容问题，目前大厂已经转型到了vw。 vw/vh是相对单位，vw相对视口的宽度，vh相对视口的高度。 1vw = 1/100的视口宽度，1vh = 1/100的视口高度。 比如iphone6/7/8的视口宽是375，换算成vw就是3.75。 但实际开发中用vw最多，因为vh是相对视口高度计算尺寸的，一般我们都是相对的视口宽，而且使用vh需
css中％和vh的区别
05-05
百分比（%）和视口高度（vh）都是用于指定元素尺寸的单位，但它们有着不同的工作方式和应用场景。 百分比（%）是相对于包含块元素的尺寸来计算的。例如，如果一个元素的宽度设置为50%，它将占据其包含块元素宽度的一半。在布局设计中，百分比通常用于实现响应式布局。 视口高度（vh）是相对于视口高度的尺寸。视口是指浏览器中用来显示网页内容的区域。例如，如果一个元素的高度设置为50vh，它将占据视口高度的一半。vh单位通常用于实现在不同设备上具有不同高度的元素。 总的来说，百分比（%）更适合用于相对于父元素的尺寸计算，而视口高度（vh）更适合用于实现响应式高度和视口尺寸相关的布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值