所以我刚刚发现了视口单元,我真的想要使用它们.
第一个挑战：我的元素的“基本大小”为760×670像素.我想使用视口单元进行缩放,以便高度为100vh,或宽度为100vw,以较小者为准.
不幸的是,虽然我可以使用100vmin来获得两者中的较小者,但我只能将其应用于宽度或高度,而不是两者.
目前我正在使用：
#root {
width: 760px;
height: 670px;
width: 100vw;
height: calc(670vw/760);
}
这会缩放宽度以适合屏幕,从而产生垂直滚动.这不是太糟糕,但我更喜欢它,如果我真的能让它适合视口.
解决方法
我已经在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()中使用.
