垂直响应高度

我正在使用引导程序，并且在宽度方向上有一个响应页面，但是我也在尝试使其垂直响应。该页面最终将最终成为一种小部件，以便用户可以将其大小调整为任何宽度和高度组合。通常，我在网上看到的研究内容与响应宽度有关，或者如果他们谈论高度媒体查询，那么它仅适用于构成页面的所有元素的一部分。

我发现在引导程序中具有断点会有所帮助，但几乎希望对垂直断点也有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){}

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

根据视口高度缩放。

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

例如，如果您要使一个div元素填充整个视口，

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

过去，人们会习惯于height: 30%使一个元素占据视口高度的30％，但问题是使用height: 30%只会使该元素占据其父元素的30％。因此，它不那么有效。

简化@media查询。

如果您确实需要在网页上确保十二个断点来确保它在所有设备上都可以正常显示，那么我认为您做错了什么。响应式网页设计的全部要点是避免为每种屏幕分辨率和宽高比设置不同的网页样式。希望使用vw和vh单位之类的东西可以帮助您避免创建多个单独的布局。据我所知，确实没有一种方法可以简化这些@media查询（如果我错了，请纠正我）。