在当今的Web开发领域，响应式布局已经成为了不可或缺的一部分。无论是手机、平板还是桌面电脑，我们都希望网页能够完美适配各种屏幕尺寸。 而要实现这一点，CSS为我们提供了一组强大的工具——基于视口的相对单位，包括 vw、vh、vmin和 vmax。 这些单位能够随着视口大小的变化而自动调整，为我们打造响应式布局提供了精准而灵活的解决方案。
视口单位之所以如此强大，是因为它们能够直接响应视口尺寸的变化，从而让我们的设计真正做到“响应式”。 你可能已经熟悉了百分比单位，但视口单位与百分比单位有一个关键的区别：百分比单位是相对于父元素的，而视口单位则是直接相对于浏览器的视口尺寸。 也就是说，无论元素在页面中的位置如何，视口单位都会根据整个视口的大小来计算。
什么是视口？
在Web开发中，视口指的是浏览器窗口中实际显示网页内容的那一部分。 简单来说，就是你看到的网页区域，不包括浏览器的地址栏、标签栏等界面元素。
视口的大小可以通过 JavaScript 的 window.innerWidth 和 window.innerHeight 来获取。
当用户缩放页面时，视口显示的内容范围会变化，但它的物理像素尺寸并不会改变。
尤其是在移动设备上，视口的概念至关重要，因为它直接关系到响应式布局在不同屏幕上的表现和用户体验。
视口单位的定义
视口单位是一组基于浏览器视口尺寸的相对单位。它们会根据视口的当前宽度和高度来计算，确保元素的大小始终与视口保持某种比例关系。让我们来逐一了解这四个单位：
vw（视口宽度单位）：想象一下，我们把视口的宽度平均分成100份，那么每一份就是1vw。举个例子，如果你的浏览器窗口宽度是1000像素，那么1vw就等于10像素，因为1000像素的1%是10像素。vh（视口高度单位）：类似地，我们把视口的高度分成100份，每一份就是1vh。如果视口高度是600像素，那么1vh就等于6像素。vmin（视口最小值单位）：取视口宽度和高度中的较小值，并将其分成100份。1vmin等于这个较小值的1%。比如，如果视口尺寸是800像素宽和400像素高，那么1vmin = 4像素（取400像素的1%）。vmax（视口最大值单位）：取视口宽度和高度中的较大值，并将其分成100份。1vmax等于这个较大值的1%。例如，视口尺寸为1200像素宽和900像素高时，1vmax = 12像素（取1200像素的1%）。实际应用示例
为了更好地理解视口单位在实际场景中的应用，让我们来看几个具体的例子：
场景一：标准横向视口
假设你的浏览器窗口尺寸是1200像素宽，1000像素高，这是一个典型的横向视口。在这种情况下：
10vw = 1200px × 10% = 120px10vh = 1000px × 10% = 100px10vmax = 1200px × 10% = 120px（取宽度和高度中的较大值）10vmin = 1000 px × 10% = 100px（取宽度和高度中的较小值）场景二：设备旋转后的竖向视口
现在，假设你将设备旋转90度，视口尺寸变为1000像素宽和1200像素高：
10vw = 1000px × 10% = 100px10vh = 1200px × 10% = 120px10vmax = 1200px × 10% = 120px（取高度1200px）10vmin = 1000px × 10% = 100px（取宽度1000px）场景三：调整后的浏览器窗口
如果将浏览器窗口调整为1000像素宽和800像素高：
10vw = 1000px × 10% = 100px10vh = 800px × 10% = 80px10vmax = 1000px × 10% = 100px（取宽度1000px）10vmin = 800px × 10% = 80px（取高度800px）通过这些示例，你可以直观地看到视口单位如何根据视口尺寸的变化而自动调整。
视口单位与百分比单位的本质区别
百分比单位和视口单位虽然都是相对单位，但它们的参照基准完全不同。百分比单位是相对于其直接父元素的尺寸来计算的，这意味着如果你在一个嵌套的元素中使用百分比，它的尺寸会受到父元素的影响，呈现出层级相对性。而视口单位则直接以浏览器的视口尺寸为基准，无论元素在DOM树中的位置如何，视口单位都会根据整个视口的大小来计算，是一种全局的相对单位。
这种区别在响应式设计中尤为重要。使用视口单位，你可以确保元素的大小始终与视口保持一致的比例，而不受父元素尺寸的限制。这为跨设备的设计提供了极大的便利。
视口单位的技术优势
视口单位为我们提供了与视口尺寸精确对应的计算方式，确保了在不同设备上的一致性。无论是在手机、平板还是桌面电脑上，元素的大小都会根据视口自动调整，实现流畅的跨设备自适应。这大大简化了响应式设计的实现过程，我们不再需要为每个断点编写复杂的媒体查询，从而减轻了开发和维护的工作量。
具体来说，视口单位有以下几大优势：
接下来，我们来通过一个实际的示例来感受视口单位的魅力。
10<!DOCTYPE html>20<html lang="en">3040<head>50<meta charset="UTF-8">60<!-- 设置视口宽度为设备宽度,初始缩放比例为1 -->70<meta name="viewport" content="width=device-width, initial-scale=1.0">80<title>Document</title>90<style>10/* 设置所有元素使用border-box盒模型 */11* {12box-sizing: border-box;13}1415/* 页面整体样式 */16body {17text-align: center;18font-family: 'Lato';19}2021/* 使用百分比单位的父容器 */22.percent-parent {23width: 50%; /* 宽度为父元素的50% */24height: 300px; /* 固定高度300px */25background-color: orange;26margin-bottom: 75px; /* 下外边距75px */27padding-top: 75px; /* 上内边距75px */28}2930/* 使用百分比单位的子元素 */31.percent-child {32width: 80%; /* 宽度为父元素的80% */33height: 150px; /* 固定高度150px */34background-color: lightblue;35}3637/* 使用视口单位的父容器 */38.viewport-parent {39width: 50vw; /* 宽度为视口宽度的50% */40height: 300px; /* 固定高度300px */41background-color: lawngreen;42margin-bottom: 75px; /* 下外边距75px */43padding-top: 75px; /* 上内边距75px */44}4546/* 使用视口单位的子元素 */47.viewport-child {48width: 80vw; /* 宽度为视口宽度的80% */49height: 150px; /* 固定高度150px */50background-color: lightblue;51}52</style>53</head>5455<body>56<h1>Viewport Units and Percentage</h1>5758<!-- 百分比布局示例 -->59<div class="percent-parent">60<div class="percent-child"></div>61</div>6263<!-- 视口单位布局示例 -->64<div class="viewport-parent">65<div class="viewport-child"></div>66</div>67</body>6869</html>
正如你所看到的，第一个子元素使用百分比单位（width: 80%）设置宽度，其实际宽度会始终保持为父元素宽度的80%。 而第二个子元素使用视口单位（width: 80vw）设置宽度，导致其宽度超出了父元素的范围。
这种现象的原因在于，vw（viewport width）单位是相对于浏览器视口宽度来计算的，与父元素的宽度无关。
当父元素宽度为50vw，子元素宽度为80vw时，子元素会比父元素宽出30vw，从而产生溢出效果。
为了更直观地理解这一现象，接下来我们通过JavaScript代码来验证视口单位的计算方式。
10<!DOCTYPE html>20<html lang="en">30<head>40<meta charset="UTF-8">50<meta name="viewport" content="width=device-width, initial-scale=1.0">60<title>Document</title>70<style>80div{90width: 50vw;10height: 50vh;11background-color: orange;12margin: 25vh auto;13display: flex;14justify-content: center;15align-items: center;16}17img {18width: 20vw;19height: auto;20}21</style>22</head>23<body>24<div>25<img src="https://i.loli.net/2021/04/07/QgHvB7hlJyCnN8s.jpg" alt="">26</div>27</body>28</html>
通过上述实验，我们可以准确定义视口（Viewport）的概念：
这个精确定义对于理解和使用视口单位（vw、vh、vmin、vmax）至关重要，因为这些单位都是基于视口的实际可视区域来计算的。
深入理解移动端视口（Viewport）机制
刚才讲的桌面浏览器视口概念只解决了一部分问题。 手机端情况更复杂，它有三种视口概念需要我们理解：
布局视口（Layout Viewport）
是网页渲染的虚拟画布，默认宽度通常为 980px
可通过 document.documentElement.clientWidth 获取
所有CSS布局计算（包括百分比和视口单位）都基于此进行
使网页能够在小屏幕上完整显示，避免水平滚动问题。
视觉视口（Visual Viewport）
表示用户当前可见的页面区域
会随用户缩放操作动态变化尺寸，但不影响页面布局
可通过 window.visualViewport API 获取
如同在布局视口上移动的"取景框"，用户缩放时呈现不同内容区域
理想视口（Ideal Viewport）
设备制造商预设的最佳视口尺寸，针对特定设备优化
宽度等同于设备独立像素（DIPs）的宽度
通过 window.screen.width 获取
<meta name="viewport" content="width=device-width, initial-scale=1.0">
通过这段代码得知，
以上这三种视口是相互协同工作的。理解它们的区别和联系，对掌握移动端视口单位的计算原理和应用限制至关重要，也是解决视口单位兼容性问题的基础。
两种像素
像素（Pixel）是计算机屏幕显示图像的基本单位，它代表了显示器能够显示的最小色彩区域。在相同物理尺寸的屏幕上，像素密度越高，能够显示的细节就越丰富，画面也就越清晰精细。
在讨论像素时，我们需要区分两个重要的概念：物理像素和 CSS 像素。当我们在 CSS 中声明 width: 250px 时，这个数值实际上指的是 CSS 像素，而非物理像素。这两种像素的区别如下：
关于像素的详细概念我们在前面的章节已经深入讨论过。如果您对这部分内容感到模糊,建议先回顾像素章节的内容,这将有助于更好地理解接下来的内容。
物理像素（physical pixel）也称为设备像素（device pixel），是指设备屏幕实际拥有的像素点，作为屏幕的基本物理单元。物理像素的数量在设备制造时就已确定，不会随着软件设置而改变。例如 MacBook Pro 14英寸（3024 × 1964）、iPhone 16 Pro Max 6.9英寸（2868 × 1320）中的这些数字表示的就是物理像素分辨率。
逻辑像素也即是设备独立像素（device independent pixels，简称DIP），可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素单位。在 CSS 中经常写的 px 就是指逻辑像素，它和物理像素并不一定是一一对应的，物理像素和逻辑像素之间的对应关系由设备像素比（Device Pixel Ratio，简称 DPR）决定。
以 iPhone 16Pro max 的 Retina 显示屏为例：其 DPR 为 3，意味着每个 CSS 像素对应 9 个物理像素（3×3）。因此，当我们设置一个元素 width: 100px 时，它实际上会占用 300 个物理像素的宽度。这种机制确保了内容在高分辨率屏幕上依然清晰锐利，同时保持了合适的显示大小。
当用户通过浏览器的缩放功能进行页面缩放时，CSS 像素与物理像素之间的映射关系会随之改变：
放大页面时：一个CSS像素会覆盖更多的物理像素
缩小页面时：多个CSS像素会被压缩到更少的物理像素中
这种动态的像素映射机制确保了网页内容可以根据用户的需求进行灵活调整，同时也是可访问性设计的重要组成部分。
三种视口
布局视口
在移动设备上看网页时，你有没有好奇过，为什么有的页面显得宽松自然，而有的却挤成一团？这背后藏着一个关键概念——视口。 作为前端工程师，我们经常和这个视口打交道。今天，我就带你从一个简单的角度去理解它，尤其是其中的布局视口（Layout Viewport），看看它在移动端开发中到底扮演了什么角色。
先来说说屏幕宽度。移动端设备的主流屏幕宽度通常在 320px 到 428px 之间（这里指的是 CSS 像素），比如 iPhone 的经典 375px。 而传统 PC 网站的设计宽度，往往在 960px 到 1200px 之间。这差距可不小！ 试想一下，一个为大屏幕设计的网页，直接塞进手机这么小的屏幕，会是什么效果？要么溢出看不到，要么缩得太小看不清。这时候，布局视口就派上用场了。
什么是布局视口？想象它是一个固定的“画布”，网页的所有内容——文字、图片、按钮——都在这个画布上进行布局和渲染。 不管你的手机屏幕是 375px 还是 428px，这个画布的尺寸不会跟着变，它有自己的默认设置。
不同浏览器厂商对这个画布的宽度有自己的“偏好”：
也就是说，如果不做任何调整，移动设备会默认用一个 980px 宽的布局视口来渲染网页。
这就解释了为什么你在手机上打开一个 PC 网站时，内容会被缩小——屏幕宽度不够，浏览器只能把 980px 的画布“挤”进更小的空间里。
获取和设置布局视口，作为前端工程师，我们有时需要知道布局视口的实际尺寸。很简单，用 JavaScript 就能拿到：
1const width = document.documentElement.clientWidth;2const height = document.documentElement.clientHeight;
但如果我想让布局视口直接匹配设备的屏幕宽度呢？这就要靠 HTML 里的 meta 标签了。你可以在代码里看到这样的设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这行代码的意思是告诉浏览器，把布局视口的宽度设成设备的屏幕宽度，缩放比例保持 1.0，这样，网页就不再默认用 980px，而是根据设备实际宽度来布局，比如 iPhone 上就是 375px。
布局视口可不只是个“画布”这么简单，它还是 CSS 布局的基准。 所有与尺寸相关的计算——比如一个元素宽度设为 50%、用 vw 单位设置字体大小，甚至媒体查询的条件——都是基于布局视口的尺寸，而不是设备的物理屏幕大小。
举个例子，假设布局视口宽度是 980px，你设置一个 div 的宽度为 50%，那么这个 div 的实际宽度就是 490px。 即使你的手机屏幕只有 375px，浏览器也会通过缩放来适配。这就是为什么 PC 网站在手机上不会直接溢出，而是以缩小的形式完整呈现。
对于前端工程师来说，理解布局视口是移动端开发的基础。 它就像一座桥梁，连接着设备的物理屏幕和网页的内容。 通过合理的设置，比如上面的 meta 标签，我们能让网页在不同设备上都呈现出最佳效果，既不拥挤也不浪费空间。
移动端的视口机制，其实是为了解决一个历史问题：早期的网页大多是为桌面端设计的，而移动设备普及后，浏览器需要一个方法让这些页面“活”下来。 布局视口就是这个方法的产物。如今，我们有了更灵活的响应式设计，但理解它的原理依然是优化用户体验的关键。
视觉视口（Visual Viewport）
视觉视口是什么？简单来说，它就是你在手机屏幕上实际看到的页面区域。它的特别之处在于，随着你的操作，它会灵活变化，但又不会干扰页面背后的结构。接下来，我们一起来看看它的核心特性和行为。
视觉视口的大小和位置并不是一成不变的。你放大页面时，它就变小，只能框住更少的内容；反之，缩小页面时，它又会变大，让你看到更多的区域。
这种变化完全取决于用户的操作，比如双指捏合缩放，或者滑动屏幕滚动页面。不过，有一点很重要：无论你怎么缩放或拖动，页面的整体布局都不会受到影响。
为什么？因为布局是由另一个概念——布局视口（Layout Viewport）掌控的，而视觉视口只是像一个可移动的窗口，在布局视口上自由滑动。
换句话说，它更像是一个“透视镜”，让你聚焦于页面的一部分，而不是去重新定义整个页面。
说到缩放，视觉视口还有个有趣的计算逻辑。它的缩放比例可以用一个简单的公式来表达：
缩放比例 = 理想视口宽度 / 视觉视口宽度
理想视口（ideal viewport）
布局视口的默认宽度并不是一个理想的宽度，于是 Apple 和其他浏览器厂商引入了理想视口的概念，它对设备而言是最理想的布局视口尺寸。 显示在理想视口中的网站具有最理想的宽度，用户无需进行缩放。
理想视口的值其实就是屏幕分辨率的值，它对应的像素叫做设备逻辑像素（Device Independent Pixel，DIP）。 DIP 和设备的物理像素无关，一个 DIP 在任意像素密度的设备屏幕上都占据相同的空间。如果用户没有进行缩放，那么一个 CSS 像素就等于一个 DIP。
理想视口的宽度一般可以通过以下公式计算： 理想视口的宽度 = 设备像素 / dpr 也就是当 布局视口的宽度 等于 设备独立像素的宽度。
这里的“理想视口”通常是指设备的屏幕宽度，以 CSS 像素为单位，而不是物理像素。
例如，iPhone 16 Pro Max 的理想视口宽度为 430 CSS 像素（在纵向模式下）。想象一下，如果当前视觉视口的宽度变成了 300 CSS 像素，那么缩放比例就是 430 ÷ 300 ≈ 1.4333。也就是说，页面内容被放大了约 1.4333 倍，比原始大小多了约 43.33%。
这正是用户放大操作后的直观体验——内容变大了，但视野范围却变窄了。
关于 PPI (每英寸像素数)的详细概念,我们已经在前面的章节中进行了深入讲解,这里不再赘述。如果您需要复习,可以回顾前面的内容。
而 DIPs 则是一个抽象的像素单位,它与物理像素解耦,在任何像素密度的设备上都保持相同的视觉大小。 在默认缩放比例下,一个 CSS 像素等于一个 DIP。这种机制让我们可以用 DIPs 来设计布局,而不用关心设备的实际物理像素。
设备独立像素（DIPs）、CSS 像素和理想视口的关系：
移动端视口配置
在移动端开发中，视口（Viewport）是一个核心概念，直接影响网页在手机、平板等设备上的呈现效果。 作为一名前端工程师，我们几乎每天都在和视口打交道，也深知它对用户体验的重要性。 今天，我想从实操的角度，带你走进视口的世界，聊聊设备独立像素（DIPs）、CSS 像素、理想视口，以及如何通过视口元标签来掌控这一切。
从 PPI 到 DIPs：像素的“聪明”之处
关于 PPI（每英寸像素数），我们已经在前面的章节中详细讲过，这里就不展开了。如果你需要复习，随时可以翻回去看看。简单来说，PPI 反映的是屏幕的清晰度，而 DIPs（设备独立像素）则是我们要重点关注的对象。
DIPs 是什么？简单点说，它是一个“万能像素”。不管设备的像素密度有多高，DIPs 都能让你的设计在视觉上保持一致的大小。 比如，在高分辨率的 Retina 屏幕上，1 个 DIP 可能对应 4 个物理像素，而在普通屏幕上，1 个 DIP 可能只对应 1 个物理像素。
CSS 像素则是我们写代码时常用的单位，比如 width: 100px。在默认缩放比例（scale=1）下，1 个 CSS 像素就等于 1 个 DIP。 这种机制让我们在设计布局时不用去纠结设备的物理像素，只需专注于 DIPs，浏览器会帮我们搞定适配。
DIPs、CSS 像素和理想视口的关系
这几个名词听起来有点复杂，但其实不难理解，我们来一一拆解：默认缩放时，1 DIP = 1 CSS 像素。也就是说，你在 CSS 里设定的像素大小，会直接体现在设备的显示效果上。 DIPs 是物理单位，代表屏幕上的一个显示点。比如在 2x 的 Retina 屏幕上，1 个 DIP 对应 4 个物理像素。 CSS 像素是抽象单位，用来定义网页元素的尺寸和位置。 理想视口宽度 是用 DIP 表示的，代表设备厂商认为最适合浏览网页的宽度。 明白了这些关系，你就能明白为什么视口配置在移动端开发中这么重要——它直接决定了网页的呈现逻辑。
如何设置视口？从代码说起
在实际开发中，我们通常通过视口元标签（viewport meta 标签）来控制视口的行为。你可能在项目里见过这样的代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
这个标签就像是给浏览器的一份“说明书”，告诉它如何渲染页面。接下来，我会详细解释每个属性的作用，让你彻底搞懂它的用法。
视口元标签属性详解
width（视口宽度）
取值：可以是 device-width（设备的理想视口宽度）或具体的像素值。
作用：定义布局视口的宽度。
举例：设置 width=device-width，视口会自动适配设备的理想宽度。
height（视口高度）
取值：可以是 device-height（设备的理想视口高度）或具体像素值。
作用：控制布局视口的高度。
建议：一般不用手动设置，高度会自动适应内容。
initial-scale（初始缩放比例）
取值范围：0.0 - 10.0。
作用：设置页面加载时的缩放级别。
说明：initial-scale=1.0 表示不缩放，保持 100%。
minimum-scale（最小缩放比例）
取值范围：0.0 - 10.0。
作用：限制用户能缩小的最小程度。
建议：为了用户体验，通常不设置。
maximum-scale（最大缩放比例）
取值范围：0.0 - 10.0。
作用：限制用户能放大的最大程度。
建议：同样为了可访问性，最好不限制。
user-scalable（用户缩放控制）
取值：yes 或 no。
作用：决定用户能否手动缩放页面。
注意：某些浏览器会忽略 no，以保障用户体验。
当我们把缩放比例设为 100%（即 initial-scale=1.0）时，会发生一件很棒的事：几个关键概念会完全“对齐”：
这意味着：
这种状态是移动端开发的理想情况，确保网页在不同设备上都能自然呈现。
实战中的最佳实践
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这样既能适配设备宽度，又能保持默认缩放，兼容性极佳。
掌握了这些，你就能更自信地处理移动端布局。接下来，我们会通过代码示例，深入探讨视口相关单位（vw、vh、vmin、vmax）的实际应用。
用视口单位实现响应式居中布局
先来看一个常见需求：让一个元素始终居中显示，无论是在手机、平板还是电脑上。以下是一个简单的实现：
10<!DOCTYPE html>20<html lang="en">30<head>40<meta charset="UTF-8">50<meta name="viewport" content="width=device-width, initial-scale=1.0">60<title>居中布局</title>70<style>80.box {90width: 50vw;10height: 50vh;11background-color: orange;12margin: 25vh auto;13}14</style>15</head>16<body>17<div class="box"></div>18</body>19</html>
这个代码的原理并不复杂，我们一步步拆解：
垂直方向：
水平方向：
无论屏幕尺寸怎么变，这个橙色方块都会稳稳地待在页面正中央。这种方法简单直接，尤其适合全屏背景、弹窗或者引导页的布局设计。
保持元素宽高比的高级应用
接下来，我们看看一个稍微复杂点的场景：如何让一个图片在不同设备上保持固定的宽高比，同时居中显示。代码如下：
10<!DOCTYPE html>20<html lang="en">30<head>40<meta charset="UTF-8">50<meta name="viewport" content="width=device-width, initial-scale=1.0">60<title>宽高比控制</title>70<style>80div {90width: 50vw;10height: 50vh;11background-color: orange;12margin: 25vh auto;13display: flex;14justify-content: center;15align-items: center;16}17img {18width: 20vmin;19height: 20vmin;20}21</style>22</head>23<body>24<div>25<img src="https://i.loli.net/2021/04/07/QgHvB7hlJyCnN8s.jpg" alt="示例图片">26</div>27</body>28</html>
这里的核心在于两个部分：
容器的设计：
图片的宽高比控制：
我们来算算不同设备上的效果：
桌面显示器（1920×1080）：
手机竖屏（375×667）：
无论设备怎么变，图片都能保持正方形比例，稳稳居中，自动适配屏幕大小。这种方法完全不需要媒体查询或 JavaScript，纯 CSS 就能搞定，是不是很优雅？
vh 单位的布局问题
在构建响应式网页时，vh 单位常被用来定义元素的高度，以确保内容能优雅地适配不同屏幕。 然而，当你把页面搬到移动设备上测试时，可能会发现一个让人头疼的问题：100vh 的表现并不像桌面浏览器那样“听话”。 尤其是在 Chrome、Firefox 和 Safari 这些主流移动浏览器中，100vh 的计算方式往往会让你措手不及。
问题核心
移动浏览器在计算 vh 时，依据的是“可视视口”（visual viewport），而不是我们通常理解的“布局视口”（layout viewport）。
这听起来可能有点抽象，但简单来说，可视视口会受到浏览器界面元素的影响， 比如地址栏和工具栏。这些动态元素会在页面加载或滚动时显示或隐藏，直接改变可视区域的高度。于是，麻烦就来了：
为了让你更直观地感受这个问题，试想这样一个场景：你设计了一个全屏的红色背景（height: 100vh），希望它在手机上完美占满屏幕。 可实际情况是，地址栏占据了一部分空间，红色区域下方冒出了滚动条；当你滚动页面，地址栏收起后，屏幕又空出一块，布局显得不够饱满。 这种“跳动感”正是 vh 在移动端常见的尴尬表现。
如果你想亲手验证，可以用手机浏览器打开这个演示页面：100vh 问题演示。 加载后，你会发现页面并没有如预期那样填满屏幕，反而多了一条滚动条。 这正是 100vh 在移动端的典型“失误”。（友情提示：这个页面托管在国外服务器，访问时可能需要代理，网速慢的话请多点耐心。）
在移动设备上运行它，你可能会遇到：
为什么会这样？
问题的根源可以归结为两点：
正是这些特性，导致基于 vh 的设计在移动端频频翻车，比如内容溢出、滚动条失控，甚至让用户感到困惑。
如何解决？
以下是几种实用的解决方案，帮你应对这个难题：
1.full-height {2height: 100dvh;3}
这是一个优雅的解决方案，但需要注意浏览器兼容性，目前只适用于较新版本的浏览器。
如果你需要更广的兼容性，可以用 JavaScript 实时计算视口高度：
1function setTrueHeight() {2const vh = window.innerHeight * 0.01;3document.documentElement.style.setProperty('--vh', `${vh}px`);4}56window.addEventListener('resize', setTrueHeight);7setTrueHeight();
然后在 CSS 中这样使用：
1.full-height {2height: calc(var(--vh, 1vh) * 100);3}
这种方法通过监听窗口的 resize 事件，确保高度始终与实际视口同步，特别适合复杂的移动端场景。
设置安全高度
如果你想要一个更简单的方案，可以用 min-height 搭配兼容性补丁：
1.full-height {2min-height: 100vh;3min-height: -webkit-fill-available; /* 兼容 iOS Safari */4}
这样可以保证元素至少占满视口，同时避免溢出问题，尤其在 iOS Safari 上表现良好。
在移动端开发中，vh 单位虽然方便，但它的“脾气”确实需要我们多费点心思去摸索。 通过新的 dvh 单位、JavaScript 动态计算，或安全高度设置，我们都能更好地掌控布局，打造出稳定且友好的用户体验。
在前端开发的日常工作中，视口单位是我们打造响应式布局的重要工具。 传统的 vh 单位在桌面端表现得不错，但在移动设备上却常常让人头疼——尤其是当地址栏或工具栏动态收起时，布局很容易出现问题。
为了解决这些问题，CSS 规范推出了三类新视口单位：大视口单位（lvh）、小视口单位（svh） 和 动态视口单位（dvh）。 这些新工具不仅弥补了传统单位的短板，还让布局在移动端变得更加灵活和可靠。
新视口单位的由来与命名
先来聊聊这些单位的命名规则。它们其实是在我们熟悉的 vh、vw 等传统单位基础上，增加了一些前缀：
其中，lvh、svh 和 dvh 是我们最常接触的。它们与传统 vh 的区别，主要体现在如何看待视口尺寸：
动态视口是怎么工作的？
动态视口（dvh）的机制其实不复杂，但非常实用：
这种实时响应的能力，让布局不再因为工具栏的动态变化而出现空白或溢出。 试想一下：你在手机上滑动页面，内容始终完美填满屏幕，既不会多出一截滚动条，也不会被遮挡。这种体验，正是 dvh 带来的价值。
动态视口单位的“大家族”
除了 dvh，动态视口单位还有其他成员，比如 dvw（动态宽度）、dvmax 和 dvmin，它们分别是传统 vw、vmax 和 vmin 的动态升级版。此外，CSS 还引入了两个特别的逻辑单位：dvi 和 dvb。要理解它们，得先看看它们的基础版本：
dvi 和 dvb 就是 vi 和 vb 的动态版本，能根据工具栏状态自动调整。大视口（lvi、lvb）和小视口（svi、svb）也遵循同样的逻辑。
兼容性与实战应用
截至 2025 年初，好消息是，这些新视口单位已经在主流浏览器中得到了广泛支持。 这意味着，我们可以放心地在项目中使用 dvh 替代传统的 vh，彻底解决移动端视口高度的计算难题。
想更直观地感受 dvh 的威力？不妨试试这个示例：dvh 单位解决方案示例
你会发现：
这个例子很好地展示了 dvh 在移动端布局中的优势，既优雅又实用。
视口单位的前世今生
回顾一下视口单位的发展脉络，会更有助于我们理解这些新特性：
这些新单位的出现，直接解决了传统 vh/vw 在移动端的局限，为响应式设计提供了更坚实的技术基础。
CSS 的新玩法：容器查询单位
说到 CSS 的进化，视口单位只是冰山一角。最近，CSS 还引入了容器查询单位，比如 cqw 和 cqh：
这些单位的美妙之处在于，它们让元素的样式可以直接响应容器的尺寸变化，而不只是依赖视口。这为组件级的响应式设计打开了一扇新窗，让模块化开发更加灵活。
CSS 正在变得越来越强大和智能。新视口单位和容器查询单位的推出，不仅解决了开发中的实际问题，还为未来的布局设计带来了更多可能性。