7

根据如何正确使用 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 中的一个错误/功能，会立即停止使用上述代码，还是设计和规范？

4

1 回答 1

1

AS 根据定义 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/

于 2018-06-14T09:01:12.627 回答