垂直响应高度

Posted 2023-03-06

【中文标题】垂直响应高度

【英文标题】：Vertical Responsive Height

【发布时间】：2017-10-02 20:37:45

【问题描述】：

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

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

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

【问题讨论】：

您是否正在寻找一种使元素高度灵活的方法？

尝试基于 flex 的 css 框架，如 Material 或 bootstrap 4

@natejms 是的，我希望使整个页面布局不仅可以根据视口高度进行缩放，还可以根据新的屏幕限制在布局中中断和重新排列，就像列在引导程序中具有断点一样跨度>

@VivekVikranth 我已经在使用 bootstrap 3，但这里的问题是我无法获得相同类型的垂直断点，例如没有 row-sm-1

【参考方案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 查询（如果我错了，请纠正我）。

【讨论】：

感谢您的回复！好吧，我可能有太多断点。但是，如果我希望它们同时响应高度和宽度，您会如何建议更改我当前的度量单位？如果我的示例不只是为方便的属性（例如宽度和高度）设置视口单位。但如果它是字体大小或填充，那么呢？即使浏览器高 10 像素， font-size: 24vw 也不会调整大小。换句话说，我希望我可以将 vw 和 vh 值都分配给某些属性。这里有什么想法吗？

@AkinHwan 根据您的描述，我认为您正在寻找 vmin 和 vmax 单位。我在回答中没有过多地谈论它们，但我会尝试调查这些。

【参考方案2】：

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

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

参考this question。