UD5工具箱
以下是与视口单位和响应式设计相关的核心术语解释，理解这些概念将帮助你更有效地使用本工具，同时提升在CSS布局方面的专业知识水平。
vw（Viewport Width）
vw是CSS3中引入的相对长度单位，全称为Viewport Width，即视口宽度的百分比。1vw等于当前视口宽度的1%。例如，在宽度为1920px的屏幕上，1vw等于19.2px。vw单位广泛应用于响应式设计中的宽度设置、字体大小和间距控制等场景。它的最大优势是摆脱了父元素尺寸的限制，直接与浏览器窗口的宽度挂钩，非常适合构建全宽横幅、流式布局和随屏幕宽度平滑缩放的组件。在本工具中，你可以在视口设置中任意定义宽度值，PX输入框中输入数值后VW行会显示对应的vw换算结果。
vh（Viewport Height）
vh代表Viewport Height，即视口高度的百分比。1vh等于当前视口高度的1%。vh单位常用于创建占满全屏的区域（如height: 100vh实现全屏Hero区域）、垂直居中的布局以及基于视口高度进行排版控制的场景。需要注意的是，移动端浏览器（尤其是iOS Safari）的地址栏展开和收缩会导致视口高度动态变化，此时100vh可能不等同于用户实际可见区域的高度。较新的CSS规范引入了svh、lvh和dvh来解决这一问题。在本工具中，视口高度值直接决定了vh和vmin/vmax的计算基准。
vmin（Viewport Minimum）
vmin取当前视口宽度（vw）和高度（vh）中较小的那个值。具体来说，1vmin等于min(视口宽度, 视口高度)的1%。vmin最经典的应用场景是确保元素在横屏和竖屏切换时保持一致的尺寸。例如，将一个正方形的宽高都设置为50vmin，无论用户如何旋转手机，正方形的边长始终保持为屏幕较短边的一半。在375×812的竖屏手机上，1vmin=3.75px（取宽度375）；当手机旋转为横屏（812×375）时，1vmin仍为3.75px（取高度375）。本工具在换算参考面板中明确标注vmin取较小边的计算规则。
vmax（Viewport Maximum）
vmax取当前视口宽度和高度中较大的那个值。1vmax等于max(视口宽度, 视口高度)的1%。vmax适合让元素充分利用屏幕的较长边。例如，一个全屏背景图的尺寸可以设置为100vmax × 100vmax，确保在任何方向下背景图都至少覆盖屏幕的整个较长边。vmax也可以用来实现一些创意视觉效果，比如始终占据屏幕较长边的装饰性元素。在1920×1080的屏幕上，1vmax=19.2px（取宽度1920）；在1080×1920（竖屏）的屏幕上，1vmax=19.2px（取高度1920）。
视口（Viewport）
视口是指浏览器窗口中用于显示网页内容的可见区域。在桌面端，视口通常等于浏览器窗口的内尺寸（不包括工具栏、地址栏等）。在移动端，视口的概念更加复杂，分为布局视口（Layout Viewport）、视觉视口（Visual Viewport）和理想视口（Ideal Viewport）。视口单位的"视口"指的是视觉视口，即用户实际可见的内容区域尺寸。本工具中的"使用当前窗口尺寸"按钮读取的正是当前浏览器的视口尺寸，即window.innerWidth和window.innerHeight。
clamp() 函数
clamp()是CSS中的一个比较函数，接受三个参数：最小值、首选值和最大值。浏览器会在首选值小于最小值时使用最小值，在首选值大于最大值时使用最大值，否则使用首选值。在响应式排版中的应用最为广泛，例如font-size: clamp(14px, 2vw, 24px)表示字体大小在14px到24px之间，随视口宽度以2vw的比例线性缩放。clamp()与视口单位结合使用，可以在不借助媒体查询的情况下实现流畅且受控的缩放效果。在本工具的FAQ中也有对clamp()用法的详细介绍和代码示例。
dv h / svh / lvh（动态/小/大视口高度）
这是CSS Values Level 4中引入的新视口单位，旨在解决移动端视口高度动态变化的问题。svh（Small Viewport Height）表示最小的视口高度，即移动端地址栏展开时的视口高度；lvh（Large Viewport Height）表示最大的视口高度，即地址栏收缩后的视口高度；dvh（Dynamic Viewport Height）则动态跟随视口高度的实时变化。这些新单位提供了比vh更精细的控制能力，适合需要精确适配移动端地址栏和底部导航栏的场景。它们尚未在所有浏览器中获得完整支持，但代表了视口单位规范的发展方向。
响应式设计（Responsive Design）
响应式设计是一种Web设计方法，通过使用流式网格、灵活的图像和CSS媒体查询，使网页能够自动适应不同设备的屏幕尺寸、方向和分辨率。视口单位是实现响应式设计的重要技术工具之一，它与百分比单位、flex布局、grid布局和媒体查询一起构成了完整的响应式技术栈。响应式设计的核心目标是"一次设计，处处适用"，避免为每种设备单独维护一个版本的网站。本工具服务于响应式设计工作流，帮助开发者在不同断点下快速换算视口单位的具体值。
CSS 相对单位（CSS Relative Units）
CSS相对单位是长度值相对于其他参考量（如视口尺寸、字号、父元素尺寸）计算的方式。主要分为三大类：字体相对单位（em、rem、ex、ch等）、视口相对单位（vw、vh、vmin、vmax、svh、lvh、dvh等）和父元素相对单位（百分比%）。相对单位是构建响应式设计的基石，因为它们会自动适应参考量的变化——这在固定像素单位（px）中是做不到的。理解不同相对单位的参考基准和适用场景，是前端开发者必须掌握的核心技能之一。本工具聚焦于视口相对单位的换算，帮助用户跨越从固定像素思维到相对单位思维的门槛。
设计稿（Design Mockup）
设计稿是UI/UX设计师使用Figma、Sketch、Adobe XD等工具制作的网页视觉设计方案，通常以固定的像素宽高（如1920×1080或375×812）标注每个元素的尺寸、颜色、间距和字体大小。前端开发者的工作之一就是将设计稿中的固定像素标注转换为与实际设备绑定的相对CSS单位。这个"从固定到流动"的转换过程就是视口单位计算器的核心应用场景——用户在设计稿尺寸（如1920px宽）下输入固定像素值（如标题48px），工具自动输出对应的vw值（如2.50vw），开发者再将vw值写入CSS代码中。