Css 垂直响应高度

我使用的是bootstrap，在页面宽度方面具有响应性，但我也试图使其垂直响应。该页面最终将成为一种小部件，因此用户可以将其调整为任何类型的宽度和高度组合。一般来说，我在网上看到的研究都是与宽度相关的，或者如果他们谈论高度媒体查询，那么这只是构成页面的所有元素的一部分

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

---

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

您还可以设置

@media

高度查询：

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

请参见以供参考。

根据视口高度进行缩放。 因此，为了回答问题的第一部分，CSS3提供了单位

vw

（视图宽度）和

vh

（视图高度）。VW和VH单位测量视口的宽度和高度。例如，

30vh

相当于视口高度的30%。还有

vmin

和

vmax

，其中

vmin

等于两者中的较小者，

vmax

等于两者中的较大者

例如，如果要使

div

元素填充整个视口

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

过去，人们会使用

height:30%

使元素占据视口高度的30%，但问题是使用

height:30%

只会使元素占据其父元素高度的30%。出于这个原因，它没有那么有效

简化@media查询。

---

如果你真的需要在你的网页上设置12个断点来确保它在所有设备上都能正常运行，我认为你做错了什么。响应式网页设计的全部要点是避免为每个屏幕分辨率和纵横比设计不同的网页样式。希望使用像

vw

和

vh

单元这样的东西可以帮助您避免创建那么多单独的布局。据我所知，确实没有一种方法可以简化那些

@media

查询（如果我错了，请纠正我）。

您是否在寻找一种使元素高度灵活的方法？尝试使用基于flex的css框架，如材质或引导4@natejms是的，我希望使整个页面布局不仅根据视口高度进行缩放，但也要根据新的屏幕限制在布局中进行中断和重新排列，就像列在中有断点一样bootstrap@VivekVikranth我已经在使用bootstrap3了，但是这里的问题是我不能垂直地获得相同类型的断点，例如，响应没有row-sm-1Thanks！好的，我可能有太多的断点。但是，如果我希望测量单位对高度和宽度都有响应，您建议如何更改我当前的测量单位？如果我的示例不仅仅是为方便的属性（如宽度和高度）设置视口单位。但如果是字体大小或填充，那会怎样呢？字体大小：24vw即使浏览器有10像素高也不会调整大小。换句话说，我希望我能将vw和vh值分配给某些属性。有什么想法吗？@AkinHwan根据你的描述，我认为你在寻找vmin和vmax单位。在我的回答中，我没有太多地谈论这些问题，但我会尝试研究这些问题。