twitter-bootstrap 垂直响应高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43786717/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical Responsive Height
提问by Akin Hwan
I am using bootstrap and have a responsive page width-wise, but am also trying to make it vertically responsive. This page will ultimately end up as a sort of widget, so that the user can resize it into any sort of width and height combination. Generally what I've seen researching online have been responsive-width related, or if they talk about height media queries it is only for a portion of all the elements that constitute the page.
我正在使用引导程序并在宽度方向上有一个响应式页面，但我也在尝试使其垂直响应。该页面最终将成为一种小部件，以便用户可以将其调整为任何类型的宽度和高度组合。一般来说，我在网上看到的研究都是与响应宽度相关的，或者如果他们谈论高度媒体查询，那只是构成页面的所有元素的一部分。
I find that having breakpoints in bootstrap helps, but almost wish there was a 12-row grid system as well for vertical breakpoints. Not all layouts will look good when constrained for height, especially when what I am trying to do won't have any vertical scrollbars either.
我发现在引导程序中设置断点有帮助，但几乎希望有一个 12 行的网格系统以及垂直断点。当受到高度限制时，并非所有布局都会看起来不错，尤其是当我尝试做的也不会有任何垂直滚动条时。
It also feels redundant to target height media queries in conjunction with certain widths when I already have (min-width & max-width) media queries. Because if I just made (min-height & max-height) media queries then it would crop content that was too wide.
当我已经有（最小宽度和最大宽度）媒体查询时，将高度媒体查询与某些宽度结合起来也感觉多余。因为如果我只是进行（最小高度和最大高度）媒体查询，那么它会裁剪太宽的内容。
Starting from a 16:9 aspect ratio and 1920x1080px resolution, I have broken it up into 12 breakpoints. 3, 6, 9 ratio heights and 4, 8, 12, 16 ratio widths.
从 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){}
Basically I'm asking if there is a better or easier way of doing this. Because currently it seems like I'm having to use a lot of custom breakpoints, and that I'll be inserting a lot of styles in each query to adjust the layouts for each screen size.
基本上我在问是否有更好或更简单的方法来做到这一点。因为目前看来我不得不使用很多自定义断点，而且我将在每个查询中插入很多样式来调整每个屏幕尺寸的布局。
回答by natejms
Scaling according to the viewport height.
根据视口高度缩放。
So to answer the first part of your question, CSS3 offers the units vw(view width) and vh(view height). The VW and VH units measure the width and height of the viewport. For an example, 30vhis the equivalent of 30 percent of the height of the viewport. There's also vminand vmax, where vminis equal to the smaller and vmaxis equal to the larger of the two.
因此，要回答问题的第一部分，CSS3 提供了单位vw（视图宽度）和vh（视图高度）。VW 和 VH 单位测量视口的宽度和高度。例如，30vh相当于视口高度的 30%。还有vminand vmax，其中vmin等于较小者和vmax等于两者中较大者。
For an example, if you wanted to make a divelement fill up the entire viewport,
例如，如果你想让一个div元素填满整个视口，
div {
width: 100vw;
height: 100vh;
}
In the past, people would have used height: 30%to make an element take up thirty percent of the height of the viewport, but the problem is that using height: 30%would only make the element take up thirty percent of its parent element. For this reason, it isn't as effective.
过去，人们习惯于height: 30%让元素占据视口高度的 30%，但问题是使用height: 30%只会让元素占据其父元素的 30%。出于这个原因，它不是那么有效。
Simplifying the @media queries.
简化@media 查询。
If you really need twelve break points in your web page to ensure it looks as it should on all devices, I'd argue that you're doing something wrong. The whole point of responsive web design is to avoid having to style your web page differently for each screen resolution and aspect ratio. Hopefully, using things like the vwand vhunits will help you avoid needing to create that many separate layouts. To my knowledge, there really isn't a way to simplify those @mediaqueries (correct me if I'm wrong).
如果您真的需要在您的网页中设置 12 个断点以确保它在所有设备上看起来都应该如此，我认为您做错了什么。响应式网页设计的重点是避免针对每个屏幕分辨率和纵横比设置不同的网页样式。希望使用vw和vh单位之类的东西可以帮助您避免创建那么多单独的布局。据我所知，确实没有办法简化这些@media查询（如果我错了，请纠正我）。
回答by randomguy04
You can also set @mediaqueries for height:
您还可以设置@media高度查询：
@media screen and ( max-height: 600px ){
background: blue;
}
see this questionfor reference.
请参阅此问题以供参考。
