视口单位，保持长宽比

Question

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

第一个挑战:我的元素的"基本大小"为760x670像素。我想使用视口单位来缩放它，这样要么高度是100vh，要么宽度是100vw，无论哪个较小。

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

当前我正在使用:

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

这将缩放宽度以适合屏幕，从而产生垂直滚动。这并不是太糟糕，但我希望它能适合viewport

Answer 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()中使用视口单元。