响应式网页中的高度设计，你认真的吗？

做者：Ahmad Shadeed
译者：前端小智
来源：ishadeed

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588... 上已经收录，更多往期高赞文章的分类，也整理了不少个人文档，和教程资料。欢迎Star和完善，你们面试能够参照考点复习，但愿咱们一块儿有点东西。

最近开源了一个 Vue 组件，还不够完善，欢迎你们来一块儿完善它，也但愿你们能给个 star 支持一下，谢谢各位了。

github 地址：https://github.com/qq44924588...

你们看到这个标题可能会觉得小智是否是又写错别字了 😂，响应式高度设计？你认真的吗？ 由于“响应式Web设计”一般是在多个宽度和设备尺寸上检查浏览器。 咱们通常经过减少宽度调整水平方向的响应能力，可是我不多看到经过减少浏览器高度来进行垂直响应的考虑。 此时，智米么心里可能有一丝的波动，并带有许些疑问：咱们须要下降浏览器的高度吗？ 是的，咱们一直探讨一下。

当咱们在设计网站的时候，不依赖实际数据进行假设是很差的，水平和垂直测试的责任也是很是重要。

为何要测试高度？

对于一个设计师来讲，一个不合理的假设是毁掉一个网站设计的重要因素之一。例如，假设用户确定是经过使用屏幕的全宽和全高浏览网站是不正确的。相反，咱们须要考虑最坏的状况。

智米么，看明白了吗。现实状况是，并不是全部用户都按照咱们所指望同样使用浏览器。 我发现下降浏览器高度时网站看起来很糟糕。

浏览器 DevTools

调整浏览器的大小(垂直方向)并非改变视口高度的惟一方法。当咱们打开浏览器DevTools，它也会占用浏览器的高度。

上图中的箭头区域表明当前视口的高度，对于较小的笔记本电脑屏幕，咱们只会看到一小部分网页。

真正的问题是：当视口高度较小时，咱们能够加强用户体验吗？ 是的，有可能，咱们来一块儿看看。

CSS 中的垂直思考

做为设计师和开发人员，咱们中的一些人只关注设计的宽度变化，而忽略了视口高度变化。例如，在开发中， UI 提供了特定组件在不一样视口宽度上的变化。 可是，不一样的视口高度又如何呢？

在上图中，咱们有一个基于视区高度进行调整的导航菜单。。若是视口大小很小(好比，iPhone 5)，导航项将显示为一个两列网格。这种思惟方式一般会被舍弃，或者直到有人说要作才会这么去优化。

CSS 中能够经过使用两种不一样方式来实现上面的需求：

• Vertical media queries
• Viewport units

Vertical Media Queries

智米么确定知识在CSS中使用宽度媒体查询。

@media (min-width: 700px) {
  .element {
    /* do something.. */
  }
}

较少使用的是垂直媒体查询，它检查视口高度。

@media (min-height: 500px) {
  .element {
    /* do something.. */
  }
}

/* or */

@media (orientation: landscape) {
  .element {
    /* do something.. */
  }
}

视口单位

使用视口单位能够帮助为用户提供更好的体验。 例如，根据视口高度控制元素之间的垂直间距。

.hero__title {
  margin-bottom: calc(10px + 5vh);
}

如上所示，大比较大的屏幕（例如iMac 27英寸），下边距就会变的很大。咱们有两种方式来解决边距过大的问题。

• Media queries
• CSS comparison 函数

第一种方式（媒体查询）受到更多支持。 若是屏幕很大，咱们须要为下边距设置最大值。

@media (min-width: 2200px) {
  .hero__title {
    margin-bottom: 40px;
  }
}

另外一种方法是使用CSS clamp()比较函数，clamp() 函数的做用是返回一个区间范围的值。

.hero__title {
  margin-bottom: clamp(10px, 5vh, 40px);
}

用例一：重叠内容

在此示例中，有一个section 区域，其中有标题和插图的部分, section 高度等于视口高度的100％。

一切看起来都很好，直到视口高度变小。section 的高度将不足以容纳插图和文本内容。所以，它将与页面上的其余部分重叠。

注意插图与下面的部分如何重叠。 发生这种状况是由于有足够的垂直空间。 看一下HTML和CSS。

<div class="hero">
  <div class="hero__wrapper">
    <div class="hero__content"><!-- content --></div>
    <img class="hero__thumb" src="figure.png" alt="" />
  </div>
</div>

css

.hero {
  height: 100vh;
}

.hero__thumb {
  flex: 0 0 550px;
  width: 550px;
}

下面是解决此类问题几种解决方案：

• 为插图设置固定大小（宽度和高度），而不是仅设置宽度，缺少高度将会继续存在这个问题。
• 仅当视口高度大于700px时才为height: 100vh（媒体查询值可能会根据上下文而有所不一样）。

咱们能够将二者结合起来，得到更强大的解决方案。

.hero__thumb {
  width: 400px;
  height: 300px;
  object-fit: contain; /* To avoid compressing the image */
}

@media (min-height: 700px) {
  .hero {
    height: 100vh;
  }

好的，如今咱们赞成使用垂直媒体查询更好。然而，使用100vh是有风险的，由于即便咱们限制了插图的大小，也可能没法对文本内容执行相同的操做。若是文本内容变长，一样的问题会再次发生，参见下图：

为了解决这个问题，咱们可使用min-height而不是height。 这样，若是内容变长，高度将扩大而且不会重叠。

@media (min-height: 700px) {
  .hero {
    min-height: 100vh;
  }
}

固定头部

在滚动时固定标题并非一件坏事，可是，咱们要确保只有在垂直空间足够好的状况下才固定标题，这样体验才会好。

这是一个关于风景类的网站，这里咱们能够看到，当高度太小的时候，这个固定高度总体就会占用很大的空间。这个对用户真的重要吗?大多数状况是不重要的，由于通常用户不会缩小成这样去看一个网站。当前，若是咱们要优化也是能够就是，思路就是经过垂直媒体查询，判断高度小于某个高度的时候就将固定定位改为静态定位。

@media (min-height: 700px) {
  .site-header {
    /* position: fixed or position: sticky */
  }
}

隐藏不过重要的元素

我在Twitter.com的导航栏上注意到了这个模式。其思想是将垂直媒体查询和Priority+模式结合起来。

调整视口高度的大小时，次重要的元素（书签和列表）将被删除并附加到“更多”菜单中，这是垂直媒体查询的一个很好的用例。

.nav__item--secondary {
  display: none;
}

@media (min-height: 700px) {
  .nav__item--secondary {
    display: block;
  }
}

减小间距-导航

若是咱们网站有侧边栏或侧边栏，当视口高度很小时，咱们能够减小一些导航项之间的垂直间距，这也会加强总体设计。

.nav__item {
  padding-top: 4px;
  padding-bottom: 4px;
}

@media (min-height: 700px) {
  .nav__item {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

模态框

咱们知道，模态框至少应该水平居中。可是，有时咱们还须要垂直居中，咱们通常会使用下面的方案：

.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和max-height。 min-height是即便内容很短也要保持模态看起来好，max-height是使用特定值限制其高度，而不是添加固定的高度。

总结

在设计一种体验时，最好从宽度和高度的角度来考虑。垂直地调整浏览器的大小可能有点奇怪，但它也有它的优点。在本文中，咱们讨论了垂直测试的重要性，以及咱们如何进行垂直测试，最后，提出了一些示例和用例，但愿对智米们有用。

---

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

原文：https://hadeed.com/article/re...

交流

文章每周持续更新，能够微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录，整理了不少个人文档，欢迎Star和完善，你们面试能够参照考点复习，另外关注公众号，后台回复福利，便可看到福利，你懂的。