根据定义，vw 单位应该代表视口宽度的 1%（即 1/100）。 （谁能确认分页媒体是否大致相同？）
因此，如果视口宽度为50em，则1vw 将等于0.5em，或者换句话说，1em 将等于2vw。
因此，在媒体查询中只使用vw 单元确实是个好主意；这似乎是最简单和最实用的视觉设计，数学上将至少定位为50em 宽度（以及高度），然后是2vw（或者，如果我们使用媒体查询定位最小高度，同样，2vmin) 将保证至少表示 1em，或者换句话说，它将保证放大率始终至少为 100%。
例如，对于 OpenBSD 端口类别列表，可以使用以下内容来放大类别列表（如果窗口本身过大并且也有足够的高度），而不会影响页面的其余部分，也不会降低体验在较小的窗户上。在这里，我们使用vmin 来对抗横向视图中的过度放大（这会导致向上/向下滚动），但您还必须小心指定至少为50em 的min-height（否则，如果高度低于50em，我们的放大倍率将低于2vmin）。
@media (min-width: 50em) and (min-height: 50em) {
/* guarantees at least 1em in all viewports */
ul {font-size: 2vmin; -webkit-columns: 4;}
}
（请注意，当规则适用时（至少在我的 Google Chrome 中进行测试时），上述内容似乎将ul 元素与用户可缩放的元素分离，因此，总体而言，最佳实践的问题仍然存在。）
或者，对于仅列出您的姓名/地址/联系方式的小型名片式首页：
/* automatically magnify business-card-style page in large viewports */
/* please don't use this unless you yourself posses a large monitor! */
@media (min-width: 50em) and (min-height: 64em) {
/* start with 100% at 50em, we'll have 150% magnification at 75em */
html {font-size: 2vmin;}
}
@media (min-width: 75em) and (min-height: 96em) {
/* start with 225% magnification at 75em (75 / 100 * 3 = 2.25) */
html {font-size: 3vmin;}
}
在我写这篇文章的时候，我也意识到为了避免过度放大导致引入滚动，似乎我们必须绝对指定 min-width 和 min-height 之类的 @987654342 @，然后也只使用vmin作为我们的单位。否则，仅使用2vw 就会将一个真正宽屏的窗口放大太多，从而很可能会引入过度和不必要的滚动。