Question

根据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中的错误/功能是否让缩放立即停止使用上述代码，还是设计和规范？

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

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

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

1 个答案: