elementUI列高度-响应式网页的高级设计，你是认真的吗？

bendan520 2023年9月2日 elementui 0

本文已由原作者 Ahmad Shadeed 翻译

听到这个标题，你可能会认为小智又打错字了。反应灵敏且设计精良？你是认真的吗？因为“响应式网页设计”通常是关于检测跨多种长度和设备尺寸的浏览器。我们通常通过减少长度来调整水平响应能力，但我很少看到通过减少浏览器高度来考虑垂直响应能力。这个时候，知米心里可能会有一点点波动，有些疑惑：我们需要增加浏览器的高度吗？是的，我们仍然详细说明。

我们在设计网站时，不依赖实际数据就做出假设是不好的，横向和纵向测试的责任也很重要。

为什么要测试海拔高度？

对于设计师来说，不合理的假设是毁掉网站设计的最重要的触发因素之一。例如，假设用户肯定正在使用屏幕的全宽和全高来查看网站是不正确的。相反，我们需要考虑最坏的情况。

吉米，你明白吗？现实情况是，并非所有用户都按照我们期望的方式使用浏览器。我发现当增加浏览器的高度时该网站看起来很糟糕。

浏览器开发工具

调整浏览器大小（垂直）并不是更改图层高度的唯一方法。当我们打开浏览器DevTools时，它也会占据浏览器的高度。

上图中的箭头区域代表当前图层的高度。对于较小的笔记本电脑屏幕，我们只能看到网页的一小部分。

真正的问题是：当层高较小时，我们能否改善用户体验？是的，有可能，让我们看看。

CSS 中的垂直思考

作为设计师和开发人员，我们中的一些人只关注设计的长度变化而忽略层高变化。例如，在开发中，UI 提供不同层长度的特定组件的变体。但是不同的层高又如何呢？

在上图中，我们有一个根据视口高度进行调整的导航菜单。。如果图层尺寸较小（例如，iPhone 5），导航项将显示为两列网格。这种思维方式一般都会被放弃，或者直到有人说去做才能够优化。

CSS可以通过两种不同的方式来实现需求：

垂直媒体查询

你确定知道如何在 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);
}

如上图elementUI列高度，对于较大的屏幕（例如iMac 27英寸），底线间距会变得非常大。我们有两种方法来解决行间距过大的问题。

第一种形式（媒体查询）受到更多支持。如果屏幕很大，我们需要给下行行距设置一个最大值。

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

另一种方法是使用CSS的clamp()比较函数。钳位()函数的作用是返回一个区间范围内的值。

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

用例一：重叠内容

在本例中，有一个剖面区域，其中包含标题和插图，剖面高度等于图层高度的100%。

一切看起来都很好，直到层高变小。该部分的高度不足以容纳插图和文字内容。因此，它将与页面的其他部分重叠。

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

<div class="hero">
  <div class="hero__wrapper">
    <div class="hero__content">


    "hero__thumb" src="figure.png" alt="" />

CSS

.hero {
  height: 100vh;
}

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

以下是该问题的一些解决方案：

我们可以将两者结合起来以获得更强大的解决方案。

.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 是使用特定值限制其高度，而不是添加固定高度。

总结

设计体验时，最好考虑长度和高度。垂直调整浏览器大小可能有点奇怪，但它有其优点。在本文中，我们讨论垂直测试的重要性以及如何执行垂直测试。最后，我们提出了一些示例和用例elementUI列高度，希望对智米用户有用。

elementUI列高度-响应式网页的高级设计，你是认真的吗？

发表评论

发表回复取消回复

相关文章

发表评论

发表回复 取消回复

发表回复取消回复