视口单元,保持纵横比？

Question

所以我刚刚发现了视口单元,我真的想要使用它们.

第一个挑战:我的元素的"基本大小"为760x670像素.我想使用视口单元对其进行缩放,以便高度为100vh或宽度100vw为较小者.

不幸的是,虽然我可以100vmin用来获得两者中较小的一个,但我只能将它应用于宽度或高度,而不是两者.

目前我正在使用:

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

这会缩放宽度以适合屏幕,从而产生垂直滚动.这不是太糟糕,但我更喜欢它,如果我真的能让它适合视口.

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().