主图像高度如何始终约为窗口大小的75％？

Question

http://www.apple.com/sg/

有一个巨大的图像将自动调整，使其始终约为窗口高度的75％。

这是怎么做到的？

我找到了一个css媒体查询，但我只能发现这个：

@media only screen and (max-width: 1068px), only screen and (max-height: 800px) {
   .page-home .billboard.evergreen {
       height: 50%;
       min-height: 630px;
    }
}

如何查找不同分辨率的其他媒体查询？

Answer 1

最简单的方法是：

.item
{
  height: 75vh;
  background-color: blue;
}

<div class="item"></div>

这些被称为viewport units。他们supported非常好。

您也可以尝试将vmax用于此用例。这将始终保持较大的vw或vh值。