垂直响应高度 [英] Vertical Responsive Height

问题描述

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

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.

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

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.

当我已经有(最小宽度和最大宽度)媒体查询时，将高度媒体查询与某些宽度结合起来也感觉多余.因为如果我只是进行 (min-height & max-height) 媒体查询，那么它会裁剪过宽的内容.

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.

从 16:9 的纵横比和 1920x1080px 的分辨率开始，我将其分解为 12 个断点.3, 6, 9 比例高度和 4, 8, 12, 16 比例宽度.

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.

@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.

推荐答案

根据视口高度缩放.

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

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, 30vh is the equivalent of 30 percent of the height of the viewport. There's also vmin and vmax, where vmin is equal to the smaller and vmax is equal to the larger of the two.

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

For an example, if you wanted to make a div element fill up the entire viewport,

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

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

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.

如果您真的需要在网页中设置 12 个断点以确保它在所有设备上看起来都正常，那么我认为您做错了.响应式网页设计的重点是避免为每个屏幕分辨率和纵横比设置不同的网页样式.希望使用诸如 vw 和 vh 单元之类的东西可以帮助您避免创建那么多单独的布局.据我所知，确实没有办法简化那些 @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 vw and vh units will help you avoid needing to create that many separate layouts. To my knowledge, there really isn't a way to simplify those @media queries (correct me if I'm wrong).

这篇关于垂直响应高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！