Question

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

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

当我已经具有（最小宽度和最大宽度）媒体查询时，结合特定宽度来定位高度媒体查询也是多余的。因为如果我只是制作（min-height＆amp; max-height）媒体查询，那么它会裁剪太宽的内容。

从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){}

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

Answer 1

根据视口高度缩放。

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

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

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

过去，人们会使用height: 30%来使元素占据视口高度的百分之三十，但问题是使用height: 30%只能生成元素占据其父元素的百分之三十。因此，它没有效果。

简化@media查询。

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

Answer 2

您还可以设置@Override protected void readField(Object r, Schema.Field f, Object oldDatum, ResolvingDecoder in, Object state) throws IOException { if (r instanceof SpecificRecordBase) { Conversion<?> conversion = ((SpecificRecordBase)).getConversion(f.pos()); Object datum; if (conversion != null) { datum = readWithConversion( oldDatum, f.schema(), f.schema().getLogicalType(), conversion, in); } else { datum = readWithoutConversion(oldDatum, f.schema(), in); }身高查询：

@media

请参阅this question以供参考。

垂直响应高度

2 个答案:

根据视口高度缩放。

简化@media查询。