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