先记住这个答案
vw、vh 按视口尺寸取百分比，vmin、vmax 则分别按较短和较长的一边取值。手机地址栏伸缩会使传统 100vh 与当前可见高度不一致；小视口单位 svh 适合保守装入，动态单位 dvh 会跟着可见区域变化。全屏组件要看是否允许自然滚动，不能一概锁成固定高度。
vw与vh分别看宽高vmin取较短边svh采用保守可见高度dvh可能随工具栏变化
手机全屏面板被工具栏遮挡
弹窗写 height: 100vh，在手机上底部按钮被地址栏挡住。问题不是按钮的 z-index，而是使用的视口高度与当前可见区域不同。若要始终装在较小可见区域里，可以考虑 100svh；若要随动态工具栏变化调整，可用 100dvh，但滚动时尺寸变化可能引起跳动。正文类内容通常更适合自然高度加最小高度，而非强制锁死。
.panel {
min-height: 100vh; /* 旧环境的基础值 */
min-height: 100svh; /* 小视口高度，减少被工具栏遮挡 */
}
.square { width: 20vmin; height: 20vmin; }
/* 较短的视口边决定正方形尺寸 */视口百分比单位每一份对应相应轴长度的 1%。
vmin 和 vmax 也只负责取边长，不会替元素处理内容溢出。示例的 .square 用 20vmin 可以随窗口保持大致比例，但如果里头放文字，极窄屏仍可能装不下。给插画或几何图形使用它们较直观；带操作按钮的内容面板要以可读性、可滚动性为先，再考虑是否用视口单位限制尺寸。
动态视口与小视口的取舍
vmin 和 vmax 可用于与视口形状相关的图形尺寸，但不保证在极端屏幕上仍可读。新单位区分小视口、大视口和动态视口：小视口保守、大视口按工具栏收起后的空间、动态视口随可见区域变化。实际移动浏览器还涉及布局视口、可视视口和键盘策略，因此全屏交互要在目标设备上核对。
一个底部固定操作栏若按 100dvh 布局，地址栏收起时高度会增长，用户滚动中可能看到面板跳动；改用 100svh 则更稳，但收起工具栏后可能留下空白。长正文通常用 min-height 并允许自然滚动，避免按钮被内容挤出或被键盘覆盖。选单位时应观察目标浏览器的地址栏和软键盘，而不是只在桌面模拟一个静态高度。
容易答错的地方
- 说
100vh总等于当前可见屏幕 - 移动浏览器工具栏变化时，两者可能不一致。
- 把
dvh当作无代价替换 - 它可能随工具栏显示隐藏变化，固定界面中的尺寸跳动需测试。
面试官还会怎么问？
vmin 在竖屏时基于哪条边？
取视口宽高较小者；常见竖屏中通常是宽度，但不应写死。
svh 与 lvh 分别代表什么？
分别基于小视口和大视口高度，适合保守装入与占满最大空间等不同需求。
全屏页面一定用 height: 100dvh 吗？
不一定。内容可能超出视口，常用 min-height 配合自然滚动更安全。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。