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的预览版）;然后重新调整窗口大小，以便宽度或高度非常小）< / p>

我使用了宽高比为16：9的元素，但代码可以适用于任何宽高比 - 只需将16/9和9/16替换为所需的宽高比。< / p>

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

视口单元，保持纵横比？

1 个答案: