文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

css vh和vw，为什么大众的值在改变方向时不会改变？

CSS中的vh和vw是视窗单位，用于设置元素的尺寸。vh表示视窗高度的百分比，vw表示视窗宽度的百分比。

当我们使用vh和vw单位时，元素的尺寸会相对于视窗的尺寸进行调整。例如，如果一个元素的宽度设置为50vw，那么它的宽度将会是视窗宽度的50%。

大众的值在改变方向时不会改变的原因是，vh和vw单位是相对于视窗的尺寸而言的，而不是相对于元素自身的尺寸。无论视窗的方向如何改变，视窗的宽度和高度都会相应地调整，但元素的尺寸仍然是相对于视窗的尺寸计算的。

举个例子，假设一个元素的宽度设置为50vw，视窗的宽度为1000px。那么该元素的宽度将会是500px。如果我们改变视窗的方向，将宽度变为600px，那么该元素的宽度仍然是50vw，即300px。元素的宽度仍然是相对于视窗宽度的50%。

vh和vw单位的优势在于可以根据视窗的尺寸来自适应调整元素的大小，使得网页在不同设备上都能有良好的显示效果。这对于响应式设计非常有用。

应用场景包括但不限于：

  • 响应式布局：使用vh和vw单位可以根据视窗的尺寸来调整元素的大小，实现响应式布局。
  • 全屏背景图：可以使用vh和vw单位来设置背景图的尺寸，使其始终填满整个视窗。
  • 比例布局：可以使用vh和vw单位来设置元素的宽高比例，实现比例布局。

腾讯云相关产品和产品介绍链接地址：

相关搜索:Pandas在合并两个数据帧和某些列的值时不会继续react钩子是如何工作的？为什么useState跟踪的值在重新渲染时不会重置？VSCode在调试时不会加载像css和js这样的静态文件为什么numpy在比较两个不同列表中的整数和浮点值时返回true index为什么在使用Ajax $().css时，html div中的所有文本都会改变颜色？为什么在使用helper函数和使用字符串插值或连接时，我会得到两种不同的结果，最小的断言相等为什么在构建webpack.mix.js时，我的.css文件不会出现在公共目录中？为什么当B扩展A时，范围内隐式类型A和B的值不会有歧义？为什么当我轻敲颤振时，它不会改变值，而只是在拖动时才会改变值？为什么当点击Safari for iOS上的链接时，css工具提示不会出现和消失？
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

网站自适应布局为什么我要抛弃rem，改用vw？

简单介绍下rem布局方案 rem是css中的长度单位，1rem=根元素html的font-size值。...当页面中所有元素都使用rem单位时，你只需要改变根元素font-size值，所有元素就会按比例放大或者缩小。...因此我们只需要写一小段js代码，根据屏幕宽度改变html的font-size值，就可以做到弹性布局。这种方法确实便捷，兼容性也很好，是目前非常主流的弹性布局方案。...百分比%是根据父元素宽度或者高度进行计算，而vw vh固定按照viewport来计算，不会受父元素宽高度影响。...相较之下，vw单位兼容性比rem稍差，ios8、安卓4.4及以上才完全支持。这也是为什么之前rem布局一直更流行的原因。

3.1K10

54个CSS重难点整理，12-24篇，进阶高薪必需要掌握的知识点

18、常见的CSS单位； 19、CSS优化和提高性能的方法？ 20、为什么有时候用translate来改变位置而不是定位? 21、清除浮动的3种方式 22、position的属性有哪些？...vw： 相对于视窗的宽度，视窗宽度是 100vw； vh： 相对于视窗的高度，视窗高度是 100vh； vmin： vw 和 vh 中的较小值； vmax： vw 和 vh 中的较大值； vw 和百分比的区别是...20、为什么有时候用translate来改变位置而不是定位?...元素的位置在屏幕滚动时不会改变，⽐如回到顶部的按钮都是用的fixed固定定位 sticky 粘性定位，基于用户的滚动位置来定位。...24、transform先平移在旋转和先旋转再平移有什么区别 先平移后旋转，并不会改变坐标轴方向 但是如果先旋转后平移，在旋转时坐标轴的方向也随着发生了改变 然后再平移，移动的方向也就发生了改变了 <style

1.2K10

CSS Viewport 单位，很多人还不知道使用它来快速布局！

简介 根据CSS规范，视口百分比单位相对于初始包含块的大小，它是web页面的根元素。 视口单位为：vw，vh，vmin和vmax。 vw单位表示根元素宽度的百分比。1vw等于视口宽度的1%。...假设我们有一个元素与以下CSS： .element { width: 50vw; } 当视口宽度为500px时，50vw计算如下 width = 500*50% = 250px 视口高度 vh单位表示根元素高度的百分比...Vmin 单位 vmin表示视口的宽度和高度中的较小值，也就是vw 和 vh 中的较小值。如果视口宽度大于其高度，则将根据高度计算该值。 我们以下面的例子为例。 ?...) = 10% * 164 = 16.4px Vmax 单位 vmax与vmin相反,该值是vw 和 vh 中的较大值。...，并在些基础上添加2vw的值，有了这些，字体大小值就不会变得太小。

3.2K30

vh 存在问题？试试动态视口单位之 dvh、svh、lvh

大部分同学都知道，在 CSS 世界中，有 vw、vh、vmax、vmin 这几个与视口 Viewport 相关的单位。...正常而言： 1vw 等于1/100的视口宽度 （Viewport Width） 1vh 等于1/100的视口高度 （Viewport Height） vmin — vmin 的值是当前 vw 和 vh...中较小的值 vmax — vw 和 vh 中较大的值 vh 在移动端存在重大问题！...根因在于： 很多浏览器，在计算 100vh 的高度的时候，会把地址栏等相关控件的高度计算在内2 同时，很多时候，由于会弹出软键盘等操作，在弹出的过程中，100vh 的计算值并不会实时发生变化！...1cqh 等于容器高度的 1% 容器查询：它给予了 CSS，在不改变浏览器视口宽度的前提下，只是根据容器的宽度变化，对布局做成调整的能力。

1.8K20

单屏页面响应式适配玩法

根字体小于 12px 以后，rem 对应的值则都是设置的倍数乘以 12；设置根字体为 vh, vw 单位同理，rem 会在 vh, vw 换算达到 12 以后就不再改变。...PPPS: 是不是有点坑，应该字体的属性最小值为 12，而其他属性的值没有控制才对 所以，如果使用 rem + vh 方案，在界面缩小到一定尺寸后继续缩小，有些值达到最小值固定不变，而有些值仍在变小，UI...8.2、落地方案，vh + vw + JavaScript 计算 而直接在元素的属性值上设置为 vh 或 vw，所有的值都会实时变动，没有最小值（除了属性为字体有最小值），这样就最大程度减少 UI 变乱的情况了...于是乎，现在的想法是 在原来以 vh 为基础的情况下，拷贝所有带 vh 单位的代码，把 vh 换成 vw，当然这些改动都在一个比如叫 .vw-mode 的类下面，基本上可以无缝迁移，只需替换 vh 函数名即可...把 .vw-mode 下的内容设置为上下居中。 通过 JS 计算，当可视区比例为竖向比例时，则在顶层元素加上 .vw-mode 类名，当比例为横向比例时，则去掉 .vw-mode 类名。

1.9K20

01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】

我们用其中一个颜色举例，例如 red 5%，表示这个红色在整个颜色范围的 5% 时停止纯色范围，开始进行渐变，这个范围指的是从初始位置开始到结束方向的百分比范围，例如如图： 图片 在这里的 red...5% 指的是红色的颜色纯色停止范围在渐变方向上范围的 5% 处，所以在渐变中表现为 5% 之后是绿色和红色的渐变范围： 图片 此时绿色的渐变线在分享的 90% 处： 图片 那么之后的就是蓝色颜色...，通过定义这个点的位置和渐变形状，完成渐变需求。...三、渐变色实战 案例如下： 3.1 背景移动 背景移动使用 background-position 属性，当我们使用渐变色作为背景时，需要移动渐变色才能时背景发生改变。..."> 此时我们可以看到，设置了一个渐变色，使用了 closest-side ，在大小设置为 130vw 130vh（vw和vh是视窗大小），background-position

4.9K10

深度解析CSS中的单位以及区别

css中有几个不同的单位表示长度，使用时数字加单位。如果长度为0，则可以省略单位。 长度单位可分为两种类型：相对和绝对。...1pc = 12pt 相对长度 %百分比：浏览器根据其父级元素的样式来计算值。父级改变的时候，子级自动改变。...em：相对于当前元素的字体大小来计算值，一般浏览器字体大小默认为16px，则2em = 32px rem：rem是根em(root em)的缩写，rem作用于非根元素时，相对于根元素字体大小；作用于根元素字体大小时...vw：vw(viewpoint width)视窗宽度，1vw = 视窗宽度的1% vh：vh(viewpoint height)视窗高度，1vh = 视窗高度的1% vmin：vw和vh中较小的那个。...vmax：vw和vh中较大的那个。 一些设置css长度的属性有width、height、margin、padding、font-size、border-width等。

40610

布局常用解决方案对比(媒体查询、百分比、rem和vwvh）

px和视口 媒体查询 百分比 自适应场景下的rem解决方案 通过vw/vh来实现自适应 一、px和视口 在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽高以及定位信息。...发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。...也就是说css样式和js代码有一定的耦合性。且必须将改变font-size的代码放在css样式之前。 五. 通过vw/vh来实现自适应 1. 什么是vw/vh ?...css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。...各个单位具体的含义如下： 单位含义vw相对于视窗的宽度，视窗宽度是100vwvh相对于视窗的高度，视窗高度是100vhvminvw和vh中的较小值vmaxvw和vh中的较大值 这里我们发现视窗宽高都是100vw

1.8K40

css新单位vw,vh在响应式设计中的应用

但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式，比如字体大小不会随着你窗口改变而改变，如今css3引入的新单位明确解决这一问题。...View Demo css3引入的”vw”和”vh”基于宽度/高度相对于窗口大小，”vw”=”view width”, “vh”=”view height”; 以上我们称为视窗单位允许我们更接近浏览器窗口来定义大小...参照demo案例对照下面四个容器的css样式: .demo { width: 100vw; font-size: 10vw; /* 宽度为窗口100%， 字体大小为窗口的10% */ } ....: 5vw; /* 宽度为窗口50%， 字体大小为窗口的5% */ } .demo4 { width: 10vw; height: 50vh; /* 宽度为窗口10%， 容器高度为窗口的50%...目前这款css3的应用支持所有主流浏览器，IE必须10以上。

1K10

深度解析CSS中的单位以及区别

css中有几个不同的单位表示长度，使用时数字加单位。如果长度为0，则可以省略单位。 长度单位可分为两种类型：相对和绝对。...1pc = 12pt 相对长度 %百分比：浏览器根据其父级元素的样式来计算值。父级改变的时候，子级自动改变。...em：相对于当前元素的字体大小来计算值，一般浏览器字体大小默认为16px，则2em = 32px rem：rem是根em(root em)的缩写，rem作用于非根元素时，相对于根元素字体大小；作用于根元素字体大小时...vw：vw(viewpoint width)视窗宽度，1vw = 视窗宽度的1% vh：vh(viewpoint height)视窗高度，1vh = 视窗高度的1% vmin：vw和vh中较小的那个。...vmax：vw和vh中较大的那个。 一些设置css长度的属性有width、height、margin、padding、font-size、border-width等。

38120

CSS 绘制「漫画」场景

说多了感觉好像是在吐槽了，这样不好不好，还是要好好学习，天天向上。 回归正题，主要是记录一下自己临时想到的，通过 CSS 的形式“画”一个场景出来。...最后给月亮和星星加了闪动的效果，整体感觉还是少了点什么，于是就加了流星。其实就是 ★=- 组合后改变的。...那么接下来就是 CSS 部分。当然，这所谓的「漫画」场景完全是我脑补的，把脑中所想的绘制出来，不会有那么细致的代码，只是大概就差不多了。先把所有的 CSS 代码放出来，然后再分点介绍一下。...在 .⛰ 部分，主要是考虑坡度，在 CSS 中能体现的也就是 border-radius 了，因此相对比较随意设定一个宽高，再加上 border-radius: 50% 50vw/20vw 25vw 5vw...如果说有额外需要说明的，那就是这里用 ::before 和 ::after 分别添加了星星和流星尾巴（写到这里突然想到，我为什么不把他们放在一个伪元素里呢）。

35430

响应式图像

2. sizes属性有两个值：第一个是媒体条件；第二个是源图尺寸值，在特定媒体条件下，此值决定了图片的宽度。需要注意是，源图尺寸值不能使用百分比，vw是唯一可用的CSS单位。...Cup victory">  上例中，我们告诉浏览器在viewport宽度小于400像素时，使图像的宽度与viewport等宽。...在viewport宽度小于960像素时，使图像的宽度为viewport宽度的75％。当viewport大于960像素时，使图像的宽度为640像素。 vm ? 当处理宽度的时候，%单位更合适。...占满高度的元素:vh > % 在另一方面，当使一个元素跨越整个页面的高度时，vh远比百分比单位好。...滚动条的问题也不是一个问题，因为现在大多数页面通常不会有水平滚动条。 vh应用 全屏背景图片 vh单位一个典型的用途是用来创建一个横跨整个屏幕高度和宽度的背景图片，不管设备的大小。

2.5K10

探讨移动端适配

在探讨移动端适配前我们先要了解下面几个概念 像素 分辨率 物理像素 CSS像素 像素 像素（Pel，pixel;pictureelement），为组成一幅图像的全部亮度和色度的最小图像单元。...需要注意的是视口的单位是CSS像素，而非物理像素 如下图 通过查看html的尺寸即可知道视口的尺寸 如图在浏览器大小没有发生改变，没有进行缩放时此时html/视口的尺寸为 1280x116...通过查看视口的大小就可以得出 CSS像素与物理像素的比值关系 如上图视口宽度为 1280 而我们的分辨率，物理像素也是 1280 此时在浏览器窗口未发生改变和缩放时，CSS像素与物理像素的比值是...我们可以通过改变视口的大小来改变CSS像素和物理像素的比值 如Iphone6 的物理像素是750px这个是固定的，我们要调整像素比，只需将视口调小就可以了如 375，此时正好是1：2 通过meta设置视口大小....vh：1vh等于视口高度的1% 如100vw 在视口宽度为 375px大小时渲染处理的盒子宽度为 375px vw,vh与百分比不同的时vw,vh永远相当于视口的宽度，而百分比是相当于父元素的宽度

1.3K10

css 文字自适应大小_div自适应窗口大小

大家好，又见面了，我是你们的朋友全栈君。 viewpoint css3提供了一些与当前viewpoint相关的元素，vw，vh，vmin, vmax等。...还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘) 让我们看看下面的代码是如何影响回流和重绘的: var s = document.body.style; s.padding...，可以提出来交流下~ —————————————————————– 4. rem + js css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况 px：绝对单位，页面按精确像素展示...rem在移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取) 页面基准320px(20px),html font-size值的计算： [javascript...vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。 vmin：vw和vh中较小的那个。 vmax：vw和vh中较大的那个。

3.2K20

CSS 也能实现碰撞检测？

实现 X 轴方向的运动 这里其实我们并没有实现碰撞检测，因为小球和小球之间接触时，并没有发生碰撞效果。 我们只实现了，小球与边界之间的碰撞反应。...，表示动画在每个循环中正反交替播放 这样，我们就巧妙的实现了，在视觉上，小球元素移动到最右侧边界时，回弹的效果： 如法炮制 Y 轴方向的运动 好，有了上面的铺垫，我们只需要再如法炮制 Y 轴方向的运动即可...并且，将动画代码中的 100px 替换成了 100%，这一点的好处是，在 transform: translate 中，100% 表示的是元素本身的高宽，这样，当我们改变元素本身的大小时，就无需再改变...// 表示动画值追加 animation-composition: accumulate; // 表示动画值累加 } 本文不会详细介绍 animation-composition，感兴趣的可以看看...3s，那我们可以设置一个 steps(10) 的颜色动画，总时长为 30s，这样，每隔 3s 就会触发一次 steps() 步骤动画，颜色的变化就能够和小球与边界的碰撞动画发生在同一时刻。

23040

金九银十前端面试题总结（附答案）

两者区别如下：（1）在渲染树中display:none会让元素完全从渲染树中消失，渲染时不会占据任何空间；visibility:hidden不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见...new调⽤的，这个所谓的this也不会被改变。...布局单位常用的布局单位包括像素（px），百分比（%），em，rem，vw/vh。...（4）vw/vh是与视图窗口有关的单位，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。...vw：相对于视窗的宽度，视窗宽度是100vw；vh：相对于视窗的高度，视窗高度是100vh；vmin：vw和vh中的较小值；vmax：vw和vh中的较大值；vw/vh 和百分比很类似，两者的区别：百分比

74840

CSS&HTML面经专题——（四）移动端响应式布局

在viewport中有两种视口，分别表示为： visual viewport（视觉视口）：浏览器内看到的网站的显示区域，用户可以通过缩放来查看网页，从而改变视觉视口。...视觉视口不会影响布局视口的宽度和高度。 固定大小——跟屏幕大小相同，在上面。 layout viewport（布局视口）：布局视口定义了pc网页在移动端的默认布局行为。...，如果在浏览器大小改变时，需要改变的样式太多，那么多套代码会很繁琐 注意：响应式代码写到要适配的CSS后面。...3、rem/ vh和vw / 流式布局 （2）rem布局——等比缩放布局（网易新闻） ​em : 是一个相对单位，1em等于当前元素或父元素的font-size值。 ​...px to rem 快捷键：ALT+Z （3）vh/vw vw：相对于视窗的宽度，视窗宽度是100vw vh：相对于视窗的高度，视窗高度是100vh 如果在iphone 6 下想 =100px ,

2.3K20

CSS单位总结

CSS 中的哪些单位首先，在 CSS 中，单位分为两大类，绝对长度单位和相对长度单位。绝对长度单位我们先来说这个，绝对长度单位最好理解，和我们现实生活中是一样的。...常见的绝对单位长度如下：这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用 cm。惟一一个经常使用的值，估计就是 px(像素)。...上面的单位中，常用的有 em、rem、vw、vh，其中 vw 和 vh 代表的是视口的宽度和高度，例如：*{ margin: 0; padding...: 0;}.container { width: 50vw; height: 100vh; background-color: pink;}在上面的代码中，我们设置了容器的宽度为 50vw，也就是占视口的一半...直接在媒体中改变 html 的 font-size，此时用 rem 作为单位的元素的大小都会相应改变，很方便。

6010

Chrome 108 ：发布新的 CSS 布局单位！

在最近发布的 Chrome 108 中，带来了几个新的 CSS 视口单位，下面我带大家一起来看一下： 视口(viewport)代表当前可见的计算机图形区域。...： vw(Viewport's width)：1vw 等于视觉视口的 1% vh(Viewport's height) : 1vh 为视觉视口高度的 1% 另外还有两个相关的衍生单位： vmin :...vw 和 vh 中的较小值 vmax : 选取 vw 和 vh 中的较大值 如果我们将一个元素的宽度设置为 100vw 高度设置为 100vh，它将完全覆盖视觉视口： 这些单位有很好的浏览器兼容性，...但是，在移动设备上的表现就差强人意了，移动设备的视口大小会受动态工具栏（例如地址栏和标签栏）存在与否的影响。视口大小可能会更改，但 vw 和 vh 的大小不会。...因此，尺寸过大的 100vh 元素可能会从视口中溢出。 当网页向下滚动时，这些动态工具栏可能又会自动缩回。在这种状态下，尺寸为 100vh 的元素又可以覆盖整个视口。

1.6K20

移动端自适应的常见手段

viewport 值 rem 和 vw 的值是根据什么计算的 1px 显示问题 如何适配刘海屏 回答关键点 viewport 相对单位 媒体查询 响应式图片 移动端开发的主要痛点是如何让页面适配各种不同的终端设备...CSS 像素是逻辑像素。 为了在不同尺寸和密度比的设备上表现出一致的视觉效果，使用逻辑像素描述一个相同尺寸的物理单位。在具有高密度比的屏幕下，一个逻辑像素对应多个物理像素。...由于早期 vw、vh 兼容性不佳，一个使用广泛的移动端适配方案 flexible 是借助 rem 来模拟 vw 特性实现移动端适配。在设计与开发时，通常会约定某一种尺寸为开发基准。...vw/vh 由于目前 vw、vh 相关单位获得了更多浏览器的支持，可以直接使用 vw、vh 单位进行移动端开发。...同理于 flexible 方案，使用 vw、vh 也需要对设计稿中的尺寸进行换算，将 px 转换为 vw 值，常见的工具如 postcss-px-to-viewport 等可以满足需求。

1.8K00
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券