在网站上工作时，不依赖真实数据进行某些假设并不是很正确。因此，负责检查宽度和高度不同的浏览器窗口中的站点非常重要。
为什么要在不同高度的浏览器窗口中检查页面？
好问题。在继续介绍使用此类检查的示例和场景之前，我想谈一谈那些不适合在不同高度的视角下工作的网站所发生的问题。这将帮助您更好地了解下一步的情况。
对网站的使用方式做出错误的假设是对网站设计师的工作产生负面影响的最重要因素之一。例如，期望通过将浏览器扩展到全屏来使用该网站是错误的。相反，您必须依靠最坏的情况。
假设与现实
以上是我的话语的例证。实际上，并非所有用户都按照设计者的建议使用浏览器。我本人遇到的站点在高度减小的浏览器窗口中看起来很糟糕。
浏览器开发人员工具
垂直调整浏览器的大小并不是影响视口高度的唯一方法。因此，例如，当开发人员工具栏打开时，它也占用了一些垂直空间。
开发人员工具栏占据了浏览器窗口的一部分。
打开开发人员工具可能会破坏您网站的设计，也可能使人们看不到预期不会出现的问题。图片的突出显示区域代表视口的当前高度。在小型笔记本电脑屏幕上查看网站时打开开发人员工具将导致页面的一小部分可见。
让我们考虑一个重要的问题：“在较小的浏览器窗口中查看网站时，是否可以改善网站的用户体验？” 我可以给这个问题一个肯定的答案。我想这个理论对我们来说足够了。让我们学习一种“垂直”样式的页面样式。
“垂直” CSS
一些设计人员和开发人员专注于页面的外观，该页面可以在不同宽度的窗口中接受。同时，他们掩盖了在不同高度的窗口中页面行为的研究。这非常重要。例如，某人正在进行页面设计，并已获得有关组件在不同宽度的浏览器窗口中应如何显示的说明。那么不同高度的窗户呢？
在大型电话上，导航元素会填充可用的垂直空间。在中型电话上，字体大小和间距减小了。在小型电话上，没有足够的垂直空间来显示所有元素。因此，它们被放置在2列中。
该图显示了一个导航菜单，其外观会根据视口的高度进行调整。设计师的目标是使菜单填充所有可用的空间。在较小的屏幕上，字体大小和菜单项之间的间距会减小。如果电话屏幕非常小（例如，像iPhone 5），则项目将显示在两列中。这些站点使用方案通常被忽略。结果，网站要么根本无法适应在不同高度的屏幕上工作，要么仅在某些网站访问者报告问题时对其进行优化。
CSS可以帮助我们将站点调整为不同的视口高度。即，我们正在谈论两种主要技术：
- 根据视口的高度进行媒体查询。
- 与视口相关的度量单位。
考虑视口高度的媒体查询
您可能已经知道，可以在CSS中使用考虑视口宽度的媒体查询：
@media (min-width: 700px) {
.element {
/* do something.. */
}
}
但是考虑到浏览器窗口高度的媒体查询却很少见：
@media (min-height: 500px) {
.element {
/* do something.. */
}
}
/* */
@media (orientation: landscape) {
.element {
/* do something.. */
}
}
与视口有关的度量单位
使用与视口大小相关的度量单位可以帮助改善站点上的用户体验。例如，考虑到视口的高度，可以调整元素之间的垂直距离。
.hero__title {
margin-bottom: calc(10px + 5vh);
}
浏览器窗口越高，元素之间的距离就越大，
所有这些似乎都没有什么大碍，只是直到您在大型显示器上看到类似的页面（例如27英寸的iMac显示器）时，这才看起来并不好。事实证明，视口的高度过高。但是幸运的是，我们有一种方法来限制大小
margin-bottom。例如，可以通过以下方式完成此操作：
- 使用媒体查询。
- 使用CSS比较功能。
第一种方法（媒体查询）当然具有更好的浏览器支持。其实质是
margin-bottom在非常大的屏幕上显示页面的情况下限制最大值。
@media (min-width: 2200px) {
.hero__title {
margin-bottom: 40px;
}
}
第二种方法是使用CSS函数
clamp()。在选择传递给该函数的值时，在这种情况下，我们将最小缩进大小设置为等于10px，最大- 50px，并且这两个之间的值取决于浏览器窗口的大小。
.hero__title {
margin-bottom: clamp(10px, 5vh, 40px);
}
如果您对此主题感兴趣，请参阅我的文章，该文章取决于页面视口的大小和CSS函数的度量单位。 下面，我们将讨论使用“垂直”媒体查询的不同方式。
实例和场景
changing更改浏览器窗口高度时重叠的页面元素
本示例适用于顶部带有标题和插图的页面。页面此部分的高度
100vh等于视口高度的100％。
高度为100vh的页面顶部
看起来非常不错，但是直到浏览器窗口的高度减小为止。页面顶部的高度不足以容纳插图和文字。结果，页面顶部的元素将与页面其他部分的内容重叠。
减小浏览器窗口的高度会破坏设计，
请注意图像如何与页面顶部下方的页面部分重叠。这是因为它们没有足够的空间。让我们看一下此示例的代码。
这是标记：
<div class="hero">
<div class="hero__wrapper">
<div class="hero__content"><!-- content --></div>
<img class="hero__thumb" src="figure.png" alt="" />
</div>
</div>
以下是样式：
.hero {
height: 100vh;
}
.hero__thumb {
flex: 0 0 550px;
width: 550px;
}
让我们考虑解决这些问题的几种选择：
- 您可以给图像指定固定的尺寸（属性
width和height），而不仅仅是宽度（width）。财产不足height是造成我们问题的原因之一。 height: 100vh仅当视口的高度更大时700px，才可以将属性应用于页面的顶部（当然，媒体查询中使用的特定值将根据您的情况而有所不同）。
您可以将这两种方法结合起来，以获得针对这些问题的更可靠的解决方案：
.hero__thumb {
width: 400px;
height: 300px;
object-fit: contain; /* */
}
@media (min-height: 700px) {
.hero {
height: 100vh;
}
}
因此，我们认为“垂直”媒体查询是一种稳定且有用的机制。但是使用值
100vh是一项冒险的业务，因为即使您可以限制图像的大小，也可能会出现无法限制文本大小的情况。例如，如果页面顶部的文本变长了，那么我们将面对一个已经熟悉的问题的新变种。
文字与网站上不应包含的部分重叠。
要解决此问题，您可以
height使用属性而不是属性min-height。使用这种方法，如果节的内容大于其可容纳的内容，则其大小将增加，并且其内容将无法覆盖下一节。
@media (min-height: 700px) {
.hero {
min-height: 100vh;
}
}
page固定页面标题
滚动时将页面标题保留在一个位置没有任何问题。但是，只有在屏幕上有足够的垂直空间时，才需要确保此标题的位置固定。
固定页面标题
这显示了以横向模式查看的站点。请注意，该标题占用了太多的垂直空间。对用户重要吗？在大多数情况下，不会。但是，您可以通过以下媒体查询来改善使用该网站的用户体验：
@media (min-height: 700px) {
.site-header {
/* position: fixed position: sticky */
}
}
在横向模式下使用此方法时，标题将不会固定。
▍隐藏不重要的项目
我在Twitter的导航菜单上注意到了这一点。即，我们正在谈论“垂直”媒体查询和Priority +模式的组合。
如果选定的项目空间不足，则将被隐藏；
当视口的高度发生变化时，次要的项目（菜单项
Bookmarks和Lists）将成为子项More。这是使用“垂直”媒体查询的一个很好的例子。
.nav__item--secondary {
display: none;
}
@media (min-height: 700px) {
.nav__item--secondary {
display: block;
}
}
而这里是我的鸣叫，它可以分析在Twitter这种方法的应用。
▍导航和更改视口的高度
下一个示例与上一个示例有关。有一个垂直导航栏（侧边栏，侧边栏）。如果视口的高度较小，则可以稍微减小导航元素之间的垂直距离，这将稍微改善页面的外观。
元素间距和视口高度
以下是此示例的样式：
.nav__item {
padding-top: 4px;
padding-bottom: 4px;
}
@media (min-height: 700px) {
.nav__item {
padding-top: 10px;
padding-bottom: 10px;
}
}
而在这里，你可以看视频吧。
另外，应该指出的是，在这种情况下，字体大小也可以修改，当浏览器窗口的高度减小时，字体大小将为元素提供更大的空间。
▍页面顶部和视口高度
页面顶部需要一些自由的垂直空间，以使其具有一些“空气”。该空间的尺寸可能取决于视口的高度。
页面越高，越“空气”。
该示例的样式如下所示：
.hero {
padding-top: 24px;
padding-bottom: 24px;
}
@media (min-height: 700px) {
.hero {
padding-top: 40px;
padding-bottom: 40px;
}
}
▍模块组件
您可能已经知道，模态分量至少应水平居中。但是您可能需要垂直对齐此类元素。这是可能的，但它会妨碍更改此类元素输出的数据量。
如果模态包含正确数量的数据，则看起来非常好，如下所示。
正确的模态元素
这是此元素的样式：
.modal__body {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 500px;
}
但是，如果需要在同一元素中显示更多文本，那么一切都不会那么好。即，该元素将垂直填充屏幕，并且用户将无法滚动其内容。
模态元素过高
出现此问题的原因如下：
- 模态没有指定高度。
- 元素垂直居中（这将加快问题的速度）。
这是解决这些问题的CSS：
.modal__body {
position: absolute;
left: 50%;
top: 3rem;
transform: translateX(-50%);
width: 500px;
min-height: 200px;
max-height: 500px;
overflow-y: auto;
}
@media (min-height: 700px) {
.modal__body {
top: 50%;
transform: translate(-50%, -50%);
}
}
请注意，此处使用属性
min-height和min-width。首先是使元素即使显示短文本也看起来不错。第二个允许您将其高度限制为给定值，而不是为其提供恒定的高度。
适用于显示长文本的模态元素
结果
在设计网站时，要考虑到用户与他们合作会给人留下的印象，最好根据浏览器窗口的宽度和高度来构建他们的设计。对于在不同高度的窗口中测试页面的人来说，这似乎很奇怪，但是这种测试证明了自己的正确性。在这里，我谈到了“垂直”方法对网站设计的重要性，如何设计页面以便在不同高度的视口中正确显示页面的方法，并讨论了示例。我希望您发现所有这些有用。
您是否在关注所创建的网页在不同高度的浏览器窗口中的外观？
