vmin：掌控响应式布局的“最小分子尺”

在网页设计里，经常遇到尺寸与比例的权衡。比如，让容器在不同设备上保持一致的内边距或边框，或者让字体大小与视窗最小可视高度匹配，vmin 就能派上用场。它是视窗高度的最小单位，1 vmin 等于 1 个视窗的最小可视高度（不含滚动条），是用在百分比与视窗单位之间的一把尺，能帮你更直接地做响应式与比例化设计。

为什么用 vmin

想象在手机端做一个卡片布局，你希望标题与边距在小屏上也显得充足，却不想在大屏上过度放大字体造成信息堆叠。vmin 可以让你以一种可比对的单位来统一设定：比如把卡片内边距定在 2vmin，手机端默认字体 16px 时，就是大约 3.2 个像素，而平板上视窗更大，同样的 2vmin 就能提供更大的呼吸空间。

基本用法

在 CSS 中，直接使用 vmin 作为长度单位即可：

.container {
  padding: 2vmin;
}

它也可以与百分比、calc 一起使用，实现更复杂的布局计算。

实战场景：响应式边距与字体

在做一个导航栏时，你希望在不同设备上边距的视觉比例保持一致，而不依赖绝对像素值：

nav {
  margin: 1.5vmin 0;
}

在小屏上，1.5vmin 会是相对浏览器高度的一个合适值，确保在各种屏幕比例上都有足够的空间感，而不会在大屏上显得太小。

vmin 与 vw/vh 的区别

不要把 vmin 与 vw、vh 混淆。vw 是视窗宽度的 1%，vh 是视窗高度的 1%。vmin 是在 vw 与 vh 之间取较小的那个，因此 1vmin 等于 1vw 与 1vh 中的较小值，这在处理受屏幕比例影响的布局时特别有用。

vmin 与百分比单位

百分比在响应式中常用，但它依赖于父容器的尺寸，而 vmin 是基于视窗的绝对度量，两者结合使用能提供更强的可预测性。

例如，想让一个按钮在不同容器里都能保持相同的空间感：

button {
  width: 60%;
  margin: 1vmin;
}

在不同容器里，只要 1vmin 的绝对尺寸合理，按钮两侧的留白就显得一致。

进阶技巧：配合媒体查询与 rem

结合 rem 与媒体查询，可以更精细地调整比例：

:root {
  font-size: 100%;
}

@media (min-width: 600px) {
  :root {
    font-size: 1.2rem;
  }
}

body {
  font-size: 1rem;
  padding: 2vmin;
}

这样在不同断点上，通过调整基准字体大小，配合 vmin 的固定比例，使内边距随视窗高度自然变化。

实际效果与注意点

在小屏设备上使用 vmin 时，注意滚动条带来的可视高度差异，1vmin 通常会排除滚动条，但具体实现上不同浏览器的取值略有不同，需要在测试中校准。

结语

用 vmin 管理响应式布局的最小空间单位，能让你在保持视觉比例一致性的同时，减少绝对像素的依赖，提升布局的灵活性与可维护性。把它作为比例尺，配合百分比、rem、vw/vh 与媒体查询，你会在移动端与桌面端都更自然地做出协调的界面。