视口单位，保持纵横比？答案

【问题标题】：Viewport units, keeping aspect ratio?视口单位，保持纵横比？
【发布时间】：2012-12-16 10:19:58
【问题描述】：

所以我刚刚发现了视口单元，我真的很想使用它们。

第一个挑战：我的元素的“基本尺寸”为 760x670 像素。我想使用视口单位将其放大，以便高度为100vh，或宽度为100vw，以较小者为准。

不幸的是，虽然我可以使用100vmin 来获取两者中的较小者，但我只能将其应用于宽度或高度，而不是两者。

目前我正在使用：

#root {
    width: 760px;
    height: 670px;
    width: 100vw;
    height: calc(670vw/760);
}

这会缩放宽度以适应屏幕，从而实现垂直滚动。这还不错，但如果我真的可以让它适合视口，我会更喜欢它。

【问题讨论】：

我正在 Chrome 中进行测试。似乎vw 单位不能在calc 内使用。我试过height: -webkit-calc(100vw/3)之类的东西。唯一同时支持calc 和视口单元的其他浏览器是 IE10 和 Safari 6，它们都不能安装在我的平台（Windows 7）上。
顺便说一句，这应该可以通过媒体查询实现，因为您可以根据纵横比分支代码，例如@media all and (min-aspect-ratio: 760/670) { ... }.
这是一个WebKit bug。所以忘记 Chrome/Safari。 Firefox/Opera 甚至不实现视口单元。看来 IE10 是唯一能理解您的代码的浏览器。 :)
@ŠimeVidas 你可以对这两个 cmets 做出很好的回答。
@PavloMykhalov 我已经让它在 IE10 中工作。答案如下。 :-)

标签： css viewport viewport-units

【解决方案1】：

我已经让它在 IE10 中工作了：

#elem {
    width: 100vw;
    height: calc((9/16)*100vw);
}

@media (min-aspect-ratio:16/9) {
    #elem {
        height: 100vh;
        width: calc((16/9)*100vh);
    }
}

现场演示：http://jsfiddle.net/C2ZGR/show/（在 IE10 中打开（Windows 7 提供预览版）；然后重新调整窗口大小，使宽度或高度都非常小）

我使用了一个纵横比为 16:9 的元素，但代码适用于任何纵横比 - 只需将 16/9 和 9/16 替换为您想要的纵横比即可。

顺便说一句，IE10 是唯一可以运行此演示的浏览器。 Firefox/Opera 还没有实现视口单元，WebKit 浏览器目前存在一个错误，即无法在 calc() 中使用视口单元。

【讨论】：