6

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

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

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

目前我正在使用：

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

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

4

1 回答 1

11

我已经让它在 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中打开（Win​​dows 7有预览版）；然后重新调整窗口大小，使宽度或高度都非常小）

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

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

于 2013-01-19T22:42:48.727 回答