vmax 对缩放不友好吗？

【问题标题】：Are viewport units vw/vh/vmin/vmax not zoom friendly?视口单位 vw/vh/vmin/vmax 对缩放不友好吗？
【发布时间】：2015-07-22 18:01:19
【问题描述】：

根据How to properly use css-values viewport-relative-lengths?，我尝试通过以下方式使用视口单位，在大显示器上自动放大小页面：

/* automatically magnify business-card-style page in large viewports */
@media (min-width: 50em) and (min-height: 64em) {
  /* start with 100% at 50em, we'll have 150% magnification at 75em */
  html {font-size: 2vmin;}
}

但是，在 Google Chrome 中进行测试时，它使缩放功能大部分停止工作。

这是 Chrome 中的一个错误/功能，导致缩放立即停止使用上述代码，还是设计和规范？

【问题讨论】：

另外，至少有什么方法可以用 css3 @media 检测缩放，因此只有在没有缩放活动时才应用视口单位？
澄清：我说的是桌面版的谷歌浏览器，而不是移动版。
Viewport-unit font-size and zooming bug: which browsers are affected?的可能重复

标签： css responsive-design font-size viewport-units

【解决方案1】：

根据定义，vw/vh/vmin/vmax 是与视口宽度相关的单位：

vw 相对于视口宽度的 1%
vh 相对于视口高度的 1%
vmin 相对于视口*小尺寸的 1%
vmax 相对于视口*大尺寸的 1%

div{
  height: 3rem;
  border: 1px solid red;
  margin: 1rem;
}

 The following div has style="width:10vh"
 <div style="width:10vh"></div>
 The following div has style="width:10vw"
 <div style="width:10vw"></div>

如果您在示例中看到，当您调整窗口大小时，div 会改变其宽度。如果您应用缩放但视口没有改变大小，则不会应用任何改变。

也许您必须检查在您的 html 标头中的 viewport 元标记中设置的任何其他属性，并检查它是否阻碍了缩放时的缩放方式。这篇文章可以帮助你检查它https://css-tricks.com/snippets/html/responsive-meta-tag/

【讨论】：