垂直响应高度

Question

我正在使用引导程序并且有一个响应式页面宽度，但我也试图使其垂直响应。该页面最终将成为一种小部件，以便用户可以将其调整为任何类型的宽度和高度组合。一般来说，我在网上看到的研究都是与响应宽度相关的，或者如果他们谈论高度媒体查询，它只是针对构成页面的所有元素的一部分。

我发现在引导程序中设置断点会有所帮助，但几乎希望垂直断点也有 12 行网格系统。并非所有布局在高度受限时都会看起来不错，尤其是当我尝试做的事情也没有任何垂直滚动条时。

当我已经有（最小宽度和最大宽度）媒体查询时，将高度媒体查询与某些宽度结合起来感觉也是多余的。因为如果我只是进行（最小高度和最大高度）媒体查询，那么它会裁剪太宽的内容。

从 16:9 的纵横比和 1920x1080px 的分辨率开始，我将其分解为 12 个断点。 3、6、9 比例高度和 4、8、12、16 比例宽度。

@media (min-width: 480px) and (min-height: 360px){}
@media (min-width: 480px) and (min-height: 720px){}
@media (min-width: 480px) and (min-height: 1080px){}
@media (min-width: 960px) and (min-height: 360px){}
@media (min-width: 960px) and (min-height: 720px){}
@media (min-width: 960px) and (min-height: 1080px){}
@media (min-width: 1440px) and (min-height: 360px){}
@media (min-width: 1440px) and (min-height: 720px){}
@media (min-width: 1440px) and (min-height: 1080px){}
@media (min-width: 1920px) and (min-height: 360px){}
@media (min-width: 1920px) and (min-height: 720px){}
@media (min-width: 1920px) and (min-height: 1080px){}

基本上我在问是否有更好或更简单的方法来做到这一点。因为目前我似乎不得不使用很多自定义断点，并且我将在每个查询中插入很多样式来调整每个屏幕尺寸的布局。

Answer 1

根据视口高度缩放。

因此，为了回答您问题的第一部分，CSS3 提供了单位 vw（视图宽度）和 vh（视图高度）。 VW 和 VH 单位测量视口的宽度和高度。例如，30vh 相当于视口高度的 30%。还有vmin和vmax，其中vmin等于两者中的较小者，vmax等于两者中的较大者。

例如，如果您想让div 元素填满整个视口，

div {
  width: 100vw;
  height: 100vh;
}

过去人们会使用height: 30%让元素占据视口高度的百分之三十，但问题是使用height: 30%只会让元素占据百分之三十其父元素的。因此，它没有那么有效。

简化@media 查询。

如果您确实需要在网页中设置 12 个断点以确保它在所有设备上看起来都应如此，我认为您做错了什么。响应式网页设计的重点是避免为每个屏幕分辨率和纵横比设置不同的网页样式。希望使用像vw 和vh 这样的单位可以帮助您避免创建那么多单独的布局。据我所知，确实没有办法简化那些 @media 查询（如果我错了，请纠正我）。

Answer 2

也可以设置@media查询身高：

@media screen and ( max-height: 600px ){
    background: blue;
}

参考this question。