视口单元vw/vh/vmin/vmax不可缩放友好吗？

Question

根据如何正确使用css-values视口相对长度？,我尝试以下列方式使用视口单元,自动放大大显示器上的小页面:

/* 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 是与视口宽度相关的单位：

• 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 会更改其宽度。如果您应用缩放但视口没有更改大小，则它不会应用任何更改。

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