vw和vh

最新推荐文章于 2022-04-16 13:13:19 发布
最新推荐文章于 2022-04-16 13:13:19 发布
阅读量484 收藏
点赞数 2
分类专栏： 杂 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xy_is_fhh/article/details/121878227
版权

vw和vh是什么？

vw/vh是一个相对单位（类似em和rem相对单位）

->  vw是：viewport width  视口宽度单位

->  vh是：viewport height  视口高度单位

相对视口的尺寸计算结果

->  1vw=1/100视口宽度

->  1vh=1/100视口高度

vw和百分比的区别是什么？

->  百分比%相对于父元素来说的

->  vw/vh 相对于当前视口来说的

CSS3中的vw和vh单位 - 编程指南
2301_79326559的博客
09-23 372
在CSS3中，vw和vh单位提供了一种相对于浏览器视窗大小的百分比单位。它们可以用于创建响应式的布局和样式，使得元素的大小可以根据视窗尺寸自动调整。通过使用vw和vh单位，我们可以更轻松地开发适应不同屏幕大小的网页。希望本文对你理解vw和vh单位有所帮助！
怎么理解vw和vh ?
hsany330的专栏
08-04 1809
vw和vh是css3中的新特性，是一种视口单位。在目前PC/H5中广泛使用，vw主要是可视区域宽度，vh主要是可视区域高度。通过这种视口单位可实现自适应布局。 1vw = 1% 100vw = 屏幕可视宽度 100vh = 屏幕可视高度 calc(100vw - 50px) = 动态计算 屏幕宽度 - 50px ,注意：减号 前后必须有空格 ...
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.
vw\vh的介绍
Be myself
03-06 4711
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...
纯css3使用vw和vh实现自适应的方法
09-24
【纯CSS3使用vw和vh实现自适应的方法】 在网页设计中，自适应布局是确保内容在不同设备上都能良好展示的关键。CSS3引入了一种新的解决方案，即使用`vw`和`vh`单位，来简化响应式设计的实现过程。`vw`和`vh`单位基于...
前端开发中vw和vh相对单位的理解与应用
02-11
内容概要：本文档详细解析了前端开发中视口宽度单位(vw)和视口高度单位(vh)，它们都是基于浏览器窗口大小进行度量的相对单位。具体介绍了vw/vh的基本概念，与百分比单位的不同之处，以及如何将固定像素值转换为vw或...
px转vw和vh换算小工具
05-31
在前端开发中，像素（px）是常用的单位，但在响应式设计中，为了实现更灵活的布局，我们经常需要用到视口相关的单位，如视口宽度单位（vw）和视口高度单位（vh）。"px转vw和vh换算小工具"就是这样一个实用工具，它能...
html、js搞了个微笑的表情 感觉还挺有意思的，在这个案例里面学了个vh、vw和vmin、vmax vh是视窗高度的百分比，vw是视窗宽度的百分比；vmin是vw和vh中的较小值，vmax则相反
02-01
vh、vw、vmin和vmax就是这样一组非常实用的视口（viewport）单位，它们能帮助我们创建出更加灵活的布局。 视口指的是浏览器窗口的大小，视口单位则是根据视窗的尺寸来定义元素的大小。vh代表视窗高度的百分比，举个...
px、em、rem、%、vw、vh单位之间的区别
hdy119yaner的博客
03-14 3017
1 、px px就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。 2、em 参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。 字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body：16px1.5em = 24px class为id2...
CSS3规范视口单位主要包括以下4个：
qq_42459832的博客
12-15 640
1、vh，是指CSS中相对长度单位，表示相对视口高度（Viewport Height），1vh = 1% * 视口高度。 CSS中相对长度单位，表示相对视口高度（Viewport Height），1vh = 1% * 视口高度。 视口比例长度定义了相对于视口的长度大小，这是文档的可见部分。 当视口的大小被修改（通过更改桌面计算机窗口大小或旋转手机或平板设备的方向）时，也只有基于Gecko的浏览器才会动态更新视口值。 结合 overflow:auto，滚动条最终占用的空间大小不是减去视口大小之后的宽度，而ov
css 百分比 怎么固定正方形_CSS：度量单位（px，em，rem，vw，％等）
weixin_39812186的博客
11-29 239
Photo by Charles Deluvio on Unsplash介绍我决定写这个博客的目的是希望探索更多有关使用CSS调整大小的方法。 有这么多种可能性，很容易感到不知所措和困惑。 浏览器当前支持16种度量单位：像素，英寸，皮卡，厘米，毫米，点，百分比，em，rem，视口尺寸(vw，vh)，ex，ch，Vmax(最大视口)和vmin (viewportmin)在这16个单位中有两类：相对长...
Vh和Vw的简介和使用
tian361zyc的博客
05-23 1万+
Vw和Vh
CSS基础：vw和vh是什么
u011863822的博客
04-08 7998
vw和vh是什么
前端vh和vw
Anony_me的博客
04-12 4170
1.vh vh就是当前屏幕可见高度的1%，也就是说height:100vh == height:100%;但是有个好处是当元素没有内容时候，设置height:100%该元素不会被撑开，但是设置height:100vh，该元素会被撑开屏幕高度一致。 2.vw vw就是当前屏幕宽度的1%，补充一句，当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，但是100vw是相对于屏幕可见宽度来设置的，所以会出现50vw 比50%大的情况 ...
CSS度量单位rem、em、vw、vh详解
慕白博客
07-22 1万+
CSS度量单位rem、em、vw、vh详解 单位 说明 兼容性 em 相对长度单位，相对于当前对象内文本的字体尺寸， 根据父元素的大小变化而变化 良好 rem 相对长度单位，相对于跟元素（ 即 html 元素）font-size 的倍数， 不会被它的父元素影响 IE9+、火狐 3.6+、 safari5.0+ vw 相对于视口的宽度...
px、em、rem、vh、vw的区别是什么？
前端小白菜
08-07 7406
px、em、rem、vh、vw
vh/vw和100%的区别
caigua8700的博客
12-04 2696
在实现自适应布局时往往会用到vh/vw和100%，那么vh/vw和100%的区别是什么呢？ 第一，vh/vw的含义。 视口（viewport） 在桌面端，指的是浏览器的可视区域；在移动端，指的是Viewport中的Layout Viewport。浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。 在css3规范中，1 vw 等于视口宽度的1%，1 vh 等于视口高度的1%。vh 和 vw 是相对于视口的
vw和vh可以同时使用吗
最新发布
03-10
### CSS 中 `vw` 和 `vh` 单位的同时使用及其最佳实践 在网页设计中，`vw` (viewport width) 和 `vh` (viewport height) 是基于视口尺寸的相对长度单位。这些单位使得元素大小能够响应于浏览器窗口的变化。 #### 同时使用的场景 有时为了创建更加灵活的设计布局，可能希望同时运用这两种单位。例如，在设置一个全屏背景图片或者视频容器的时候： ```css .fullscreen-element { position: fixed; top: 0; left: 0; width: 100vw; /* 使用 viewport 的宽度 */ height: 56.25vh; /* 对应常见的 16:9 屏幕比例的高度 */ } ``` 上述代码片段展示了如何通过指定宽高分别为视窗宽度和高度的不同百分比来保持特定的比例[^1]。 #### 应用中的注意事项 - **移动设备上的滚动条影响**：由于某些平台（特别是桌面操作系统）会在页面有垂直滚动条的情况下减少可用视区宽度，这可能导致实际显示效果与预期不符。因此建议考虑加入额外样式调整以适应不同环境下的表现差异。 - **最小/最大限制**：为了避免极端情况下元素变得过大或过小，可以通过 min-width, max-width, min-height 及 max-height 来设定界限值。 ```css .responsive-container { padding: 2rem; background-color: lightblue; --base-font-size: clamp(1rem, 2vmin, 2rem); font-size: var(--base-font-size); margin-bottom: calc(2 * var(--base-font-size)); } @media only screen and (max-aspect-ratio: 1/1){ .responsive-container{ flex-direction: column; } } ``` 这段示例不仅混合了 `vw`, `vh` 还引入了其他类型的相对单位如 `vmin` 并结合媒体查询实现自适应布局[^2]。 #### 最佳实践总结 - 始终考虑到跨浏览器兼容性问题； - 测试各种屏幕分辨率下组件的行为； - 利用现代CSS特性比如 `clamp()` 函数提供更好的灵活性； - 结合媒体查询优化复杂布局的表现形式；
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值