Parlons de la conception en hauteur dans les pages Web réactives. Avez-vous besoin de réduire la hauteur du navigateur ?

Quand vous voyez ce titre, vous pensez peut-être qu'il y a une autre faute de frappe, responsive height design ? Êtes-vous sérieux? Parce que la « conception Web réactive » vérifie généralement les navigateurs sur plusieurs largeurs et tailles d'appareils. Nous ajustons généralement la réactivité horizontale en réduisant la largeur, mais je vois rarement une prise en compte de la réactivité verticale en réduisant la hauteur du navigateur. A ce moment, Zhimimi peut avoir une légère fluctuation dans son cœur, avec quelques questions : Devons-nous baisser la hauteur du navigateur ? Ouais, continuons à en parler.

Lorsque nous concevons un site Web, il n'est pas bon de faire des hypothèses sans s'appuyer sur des données réelles. La responsabilité des tests horizontaux et verticaux est également très importante.

Pourquoi tester la hauteur ?

Pour un concepteur, une hypothèse déraisonnable est l'un des facteurs importants qui ruinent la conception d'un site Web. Par exemple, il est incorrect de supposer que les utilisateurs doivent naviguer sur un site Web en utilisant toute la largeur et la hauteur de l'écran. Nous devons plutôt envisager le pire des cas.

Jimmy, tu comprends ? La réalité est que tous les utilisateurs n’utilisent pas les navigateurs comme nous l’espérons. Je trouve que le site Web a l'air horrible lorsque je baisse la hauteur du navigateur.

Browser DevTools

Redimensionner le navigateur (verticalement) n'est pas le seul moyen de modifier la hauteur de la fenêtre. Lorsque nous ouvrirons le navigateur DevTools, il occupera également la hauteur du navigateur.

La zone de flèche dans l'image ci-dessus représente la hauteur de la fenêtre d'affichage actuelle. Pour les écrans d'ordinateurs portables plus petits, nous ne verrons qu'une petite partie de la page Web.

La vraie question est : pouvons-nous améliorer l’expérience utilisateur lorsque la hauteur de la fenêtre est plus petite ? Oui, c'est possible, jetons un coup d'œil.

Pensée verticale en CSS

En tant que concepteurs et développeurs, certains d'entre nous se concentrent uniquement sur les changements de largeur du design et ignorent les changements de hauteur de la fenêtre d'affichage. Par exemple, en développement, l'interface utilisateur propose des variations de composants spécifiques sur différentes largeurs de fenêtre. Mais qu’en est-il des différentes hauteurs de fenêtre ?

Dans l'image ci-dessus, nous avons un menu de navigation qui s'ajuste en fonction de la hauteur de la fenêtre. . Si la taille de la fenêtre d'affichage est petite (par exemple, iPhone 5), les éléments de navigation apparaîtront sous la forme d'une grille à deux colonnes. Cette façon de penser est souvent abandonnée ou optimisée jusqu'à ce que quelqu'un dise que cela devrait être fait.

Les exigences ci-dessus peuvent être satisfaites de deux manières différentes en CSS :

• Requêtes multimédias verticales
• Unités de fenêtre d'affichage

Requêtes multimédias verticales

Zhimimi doit savoir comment utiliser les requêtes multimédias de largeur en CSS.

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

La requête multimédia verticale est moins couramment utilisée, qui vérifie la hauteur de la fenêtre d'affichage.

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

/* or */

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

Viewport Units

L'utilisation de Viewport Units peut aider à offrir une meilleure expérience aux utilisateurs. Par exemple, contrôlez l'espacement vertical entre les éléments en fonction de la hauteur de la fenêtre.

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

Comme indiqué ci-dessus, pour les écrans plus grands (comme l'iMac 27 pouces), la marge inférieure deviendra très grande. Nous avons deux manières de résoudre le problème des marges excessives.

• Requêtes multimédias
• Fonction de comparaison CSS

La première méthode (requêtes multimédias) est plus prise en charge. Si l'écran est grand, nous devons définir une valeur maximale pour la marge inférieure.

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

Une autre façon consiste à utiliser CSS clamp()比较函数，clamp() La fonction consiste à renvoyer une valeur dans une plage d'intervalles.

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

Cas d'utilisation 1 : contenu superposé

Dans cet exemple, il y a une zone de section contenant des titres et des illustrations, et la hauteur de la section est égale à 100 % de la hauteur de la fenêtre d'affichage.

Tout semble bien jusqu'à ce que la hauteur de la fenêtre diminue. La hauteur de la section ne sera pas suffisante pour accueillir les illustrations et le contenu du texte. Par conséquent, il chevauchera d’autres parties de la page.

Remarquez comment l'illustration chevauche la section ci-dessous. Cela se produit parce qu'il y a suffisamment d'espace vertical. Jetez un œil à HTML et CSS.

<p>
  </p><p>
    </p><p><!-- content --></p>
    <img  class="hero__thumb lazy" src="/static/imghw/default1.png" data-src="figure.png" alt="Parlons de la conception en hauteur dans les pages Web réactives. Avez-vous besoin de réduire la hauteur du navigateur ?" >
  

css

.hero {
  height: 100vh;
}

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

Voici plusieurs solutions pour résoudre de tels problèmes :

• 为插图设置固定大小（宽度和高度），而不是仅设置宽度，缺乏高度将会继续存在这个问题。
• 仅当视口高度大于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是使用特定值限制其高度，而不是添加固定的高度。

总结

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

（学习视频分享：web前端）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!