简单实用 `vmin` 的案例 | CSS-Tricks

视窗单位是指诸如 10vw（视窗宽度的 10%）或 2vh（视窗高度的 2%）之类的单位。它们有时很有用，因为它们总是相对于视窗。不受父元素的级联或影响。

还存在 vmin，它是 vw 和 vh 中较小的那个值，以及 vmax，它是较大的那个值。这些值可用于需要长度值的任何属性，就像 px、em、% 或其他单位一样。

让我们看看一个利用 `vmin` 的微型设计模式。

如果我们像这样设置 `<header>` 的 `padding`

header {
  padding: 10vmin 1rem;
}

我们会在外部获得一些固定填充（1rem），因此例如设置在其中的文本永远不会真正接触到边缘。我们也会得到一个标题，其大小会根据屏幕空间以一种感觉恰当的方式进行调整。

基于两个浏览器窗口维度中的 *最小值* 来调整大小似乎感觉很合适，而不是仅基于宽度或高度。

这里有一个视频

goose

# 2017 年 3 月 9 日

我曾经使用 vw 来定义高度以保持背景图像的图像比例，这需要使用很多 CSS 技巧，而且很实用，这是最棒的 CSS 技巧。

Jeremy Cook

# 2017 年 3 月 9 日

不错！这看起来是使用媒体查询的绝佳替代方案。基本结果相同，但 CSS 代码更少。

Eric Mikkelsen

# 2017 年 3 月 9 日

这真酷。
在某些移动浏览器（例如 Android 版 Chrome 和移动版 Safari，我认为）上，当您滚动并隐藏地址栏时，视窗大小会发生变化，导致页面布局发生变化，并使所有内容都向下移动，因为视窗现在略微变大。这不算最糟糕，但稍微有点卡顿。

Mark Lu

评论永久链接# 2017 年 3 月 10 日

这个问题应该最近已经修复了，请参阅：https://bugs.chromium.org/p/chromium/issues/detail?id=428132

Agop

# 2017 年 3 月 9 日

天哪，我怎么错过了 `vmin`？我需要它，结果写了一个媒体查询，根据 `orientation: portrait` 或 `orientation: landscape` 来使用 `vw` 或 `vh`。真是太愚蠢了。不错！:)

Mustafa Zahid Efe

# 2017 年 3 月 10 日

感谢你，太棒了。我已经找了几个月了。

Julian

# 2017 年 3 月 10 日

我喜欢玩 vmin。
使用它有一些很酷的技巧。

以下是我做的两个示例。

Aisha

# 2017 年 3 月 10 日

非常棒的技术！我喜欢 vmin 和整个视窗单位家族。

此评论线程已关闭。如果您有重要信息要分享，请联系我们。