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单位来设置元素的宽高比例，实现比例布局。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云云原生容器服务：https://cloud.tencent.com/product/tke
- 腾讯云CDN加速：https://cloud.tencent.com/product/cdn
- 腾讯云人工智能：https://cloud.tencent.com/product/ai
- 腾讯云物联网平台：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动推送：https://cloud.tencent.com/product/umeng_push
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
- 腾讯云游戏多媒体引擎：https://cloud.tencent.com/product/gme
- 腾讯云音视频处理：https://cloud.tencent.com/product/mps
相关·内容
对于谷歌来说，这是一个很难回答的问题，我只找到了不能解释我的问题的一般描述。我有一个简单的页面与css的大小一个框：width=10vw and height=10vh。在页面上，我使用javascript和getComputedStyle()来显示框(div)的实际像素。在我的手机上观看时，它会在纵向显示102x154 (高度x宽度)，
浏览 8提问于2017-01-26得票数 0
1回答
我有一个用mat-card组件填充的mat-sidenav组件。在sidenav之外，我有我的页面的其余部分。我想要的是我的sidenav卡组件，以保持完全相同的大小，因为有人正在放大和缩小页面。我已经说明了我的意思： ? 左边的图片显示了我的页面在缩放之前，右边是在缩放之后。sidenav (方框)外的内容相应地缩放和缩放，我的side
浏览 29提问于2019-08-23得票数 2
回答已采纳
我在我的HTML中使用标记，使用vw (视图宽度)和vh (视图高度)作为css宽度和高度值。我尝试使用媒体查询，将所有标签的容器设置为宽度820 to。它确实实现了我想要的，但是所有使用大众汽车<
浏览 2提问于2017-04-25得票数 1
回答已采纳
在这个中，CSS中的自动值用各种contexts.Speaker解释，表示%是外部单位，这是有意义的，因为大小取决于父母。但她也把他们，大众，vh，雷姆和其他相关单位的固定桶。vh和vw单元的尺寸计算也取决于外部源(视口)，但是为什么这些值不是外部的。
浏览 5提问于2022-03-26得票数 -1
1回答
因此，我使用SelectPDF将MVC视图的html转换为PDF，但由于某种原因，PDF中缺少了大量的内容。SelectPdf.HtmlToPdf converter = new SelectPdf.HtmlToPdf();
SelectPdf.PdfDocument视图中创建的HTML的位置。而ViewHTML以字符串的形式包含HTML
浏览 3提问于2017-10-11得票数 0
回答已采纳
4回答
div高度调整为分辨率
、、、
我想知道是否有可能使div调整到屏幕视图的高度。我想要实现的是，使第一个div总是适应分辨率，并把所有的东西从屏幕下。对于任何分辨率，灰色的部分都应该关闭屏幕。
浏览 2提问于2017-03-04得票数 2
回答已采纳
3回答
我试图建立一个网站，其中有许多盒子是相同的宽度和高度。例如，我有一个页面，它有两个并排的大小相等的框。}
float: left;
浏览 6提问于2015-04-10得票数 31
回答已采纳
1回答
我想知道创建一个基于背景的网站的最佳方法是什么。我使用的是引导带，而困扰我的是如何预测保存图像的div标记的高度？请给出最简单的方法。
浏览 2提问于2017-03-07得票数 0
回答已采纳
2回答
我在div中有一些文本，它在字体大小上使用VW，当页面宽度改变时，它会保持文本大小--这很好。.page-wrapper
浏览 1提问于2016-10-11得票数 5
考虑到getPropertyValue()只返回px中的单元，据我所知，我想知道是否有一种方法，以任何方式获得CSS值(内联CSS、外部样式表…)。在原来的单位(em，大众，%)。let height = cs.getPropertyValue('height')
el.innerText = height + " \n(I need to get 20vh)&q
浏览 5提问于2021-04-01得票数 0
回答已采纳
4回答
如何创建响应性H3文本
、、、
如何创建具有设备视口宽度的响应标题。下面是指向页面的链接，我希望在其中添加响应性文本标题。
PS。我想让“印度”成为背景回应。
浏览 1提问于2018-08-26得票数 2
回答已采纳
1回答
我有3张卡片在我的页面中，它们被放置在一个网格中。
经过多次修改后，我用下面的CSS实现了第1带来了这样的问题:在一个自动填充的栅格中放置的卡片，对于某些屏幕大小来说，会因为布局而变得更大。然而，大众将线性减少，破坏卡内容大小<em
浏览 3提问于2022-09-17得票数 2
回答已采纳
1回答
我用CSS创建了两个相同大小的圆。通过编码，桌面屏幕上的输出是正常的。但当我在手机上查看输出时，圆圈重叠了。我听说大众的单元很适合响应式页面设计。这就是为什么我使用大众汽车的原因。div class="circle1"> Hello I am a Circle1 </div>
<div class="circle2"> Hello
浏览 0提问于2017-07-21得票数 0
4回答
我在媒体查询中遇到了最大宽度/最大高度的问题。基本上，我有一个图库，它使用jQuery来显示一个模态窗口。该模式窗口由模态、内容框和图像查看器组成，其中有一些按钮用于通过图像导航)。我有最大宽度/最大高度设置在大众和vh在css中，但退出按钮被切断在移动设备。目前的CSS：display: inline-block;
positi
浏览 5提问于2017-03-29得票数 1
回答已采纳
当我使用媒体查询时，我是新手，但当我尝试开发桌面应用程序时(使用电子，但CSS的概念仍然与正常的web开发相同)，我才发现存在这样的情况。通常，我使用的是像这样的媒体屏幕(在本例中，我使用3个设备作为示例:移动、平板和桌面)：.my-default-css-code-is-here}
@media
浏览 3提问于2020-09-07得票数 1
4回答
我想有CSS，使每个div的屏幕大小，然后每当用户滚动，下一个div将捕捉到视图。有一个JavaScript库可以执行后一种操作，但我不记得它的名字了。至于获得屏幕大小的每个div，我尝试了以下方法，但都无济于事。 width: 100%;}
浏览 23提问于2018-08-30得票数 0
1回答
我一直在努力尝试同时使用css、max()和scss变量。例如，font-size: max(5vw, 991px * 0.075);可以工作，但如下所示：font-size: max(5vw, $lg);$lg: 991px;抛出“错误:不兼容的单位px和大众”，尽管它实际上与前者相同。$lg: 991px;
font
浏览 1提问于2020-12-05得票数 0
我正在尝试做一个响应式的设计，通过在线搜索，我不能得到我正在寻找的东西，但我希望所有的东西都出现在我的网站页面上。不是做每个元素，比如font-size:1.4em;，我该如何处理所有页面呢？
浏览 1提问于2014-10-04得票数 1
3回答
我试图在两个div之间做一个水平幻灯片，下面是html： <div class="viewport-1"> <h1>Viewport background 2</h1></div></div>
我尝试将容器200 at放在容器100
浏览 2提问于2015-12-28得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
