关于前端:响应式网页中的高度设计你认真的吗

作者：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 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复 福利，即可看到福利，你懂的。