css - 视口(viewport)单位 vw/vh/vmin/vmax 对缩放不友好吗？

Question

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

/* 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 中的错误/功能，还是设计和规范？

Answer 1

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

• vw 相对于视口(viewport)宽度的 1%
• vh 相对于视口(viewport)高度的1%
• vmin 相对于视口(viewport)*较小尺寸的 1%
• vmax 相对于视口(viewport)*较大尺寸的 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 会改变其宽度。如果您应用缩放但视口(viewport)未更改大小，则不会应用任何更改。

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