As per 如何正确使用 css-values viewport-relative-lengths？ https://stackoverflow.com/questions/30175730/how-to-properly-use-css-values-viewport-relative-lengths/30180320#30180320，我尝试按以下方式使用视口单位，自动放大大显示器上的小页面：
/* 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 中的错误/功能，或者是设计和规范所致？
根据定义 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 会更改其宽度。如果您应用缩放但视口没有更改大小，则它不会应用任何更改。
也许您必须检查中设置的任何其他属性viewport在您的 html 标头中添加元标记，并检查它是否阻止了缩放时应缩放的方式。这篇文章可以帮助你检查一下https://css-tricks.com/snippets/html/responsive-meta-tag/ https://css-tricks.com/snippets/html/responsive-meta-tag/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
