css - 垂直响应高度

Question

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

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

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

从 16:9 的纵横比和 1920x1080 像素的分辨率开始，我将它分成了 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

根据视口(viewport)高度缩放。

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

举个例子，如果你想让一个 div 元素填满整个视口(viewport)，

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

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

简化@media 查询。

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