Quand vous voyez ce titre, vous pensez peut-être qu'il y a une autre faute de frappe, une conception en hauteur réactive ? Ê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.
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.
Zhimi, 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.
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 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.
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.
Il existe deux manières différentes de répondre aux exigences ci-dessus en CSS :
Requêtes multimédias verticalesUnités ViewportZhimimi sait définitivement comment utiliser les requêtes multimédias de largeur en CSS.
@media (largeur min : 700 px) { .element { /* faire quelque chose.. */ }}La requête multimédia verticale est moins couramment utilisée, qui vérifie la hauteur de la fenêtre d'affichage.
@media (hauteur min : 500 px) { .element { /* faire quelque chose.. */ }}/* ou */@media (orientation : paysage) { .element { /* faire quelque chose.. */ }}L'utilisation d'unités de fenêtre peut contribuer à 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 {marge inférieure : 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.
Media queriesFonction de comparaison CSSLa 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 (largeur min : 2 200 px) { .hero__title { margin-bottom : 40 px }} ;Une autre méthode consiste à utiliser la fonction de comparaison CSS clamp(). La fonction clamp() est de renvoyer une plage de valeurs.
.hero__title { margin-bottom: clamp(10px, 5vh, 40px);}Dans cet exemple, il y a une zone de section avec des sections pour les titres et les illustrations, et la hauteur de la section est égale à 100 % de la hauteur de la fenêtre.
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 class="hero"> <p class="hero__wrapper"> <p class="hero__content"><!-- content --></p> <img class="hero__thumb" src="figure.png" alt="" /> </p></p>css
.hero { hauteur : 100vh;}.hero__thumb { flex : 0 0 550px largeur : 550px ;}Voici plusieurs solutions pour résoudre de tels problèmes :
Définissez une taille fixe (largeur et hauteur) pour l'illustration au lieu de simplement la largeur, le manque de hauteur continuera à poser ce problème. hauteur : 100vh uniquement si la hauteur de la fenêtre d'affichage est supérieure à 700 px (la valeur de la requête multimédia peut varier en fonction du contexte).Nous pouvons combiner les deux pour obtenir une solution plus puissante.
.hero__thumb { width: 400px; height: 300px; object-fit: contain; /* Pour éviter de compresser l'image */}@media (min-height : 700px) { .hero { height : 100vh ;D'accord, nous sommes maintenant d'accord sur le fait qu'il est préférable d'utiliser des requêtes multimédias verticales. Cependant, utiliser 100vh est risqué car même si l’on limite la taille de l’illustration, on ne pourra peut-être pas faire de même avec le contenu du texte. Si le contenu du texte s'allonge, le même problème se reproduira, voir la figure ci-dessous :
Pour résoudre ce problème, nous pouvons utiliser min-height au lieu de height. De cette façon, si le contenu s’allonge, la hauteur augmentera et ne se chevauchera pas.
@media (hauteur min : 700 px) { .hero { hauteur min : 100vh }}Épingler le titre pendant le défilement n'est pas une mauvaise chose, cependant, nous voulons nous assurer de n'épingler le titre que lorsque l'espace vertical est suffisamment bon pour que l'expérience soit bonne.
Il s'agit d'un site sur les paysages. Ici, nous pouvons voir que lorsque la hauteur est trop petite, la hauteur fixe prendra beaucoup de place dans son ensemble. Est-ce vraiment important pour les utilisateurs ? Dans la plupart des cas, cela n’a pas d’importance, car l’utilisateur moyen ne fera pas un zoom arrière pour voir un site Web comme celui-ci. Actuellement, si nous voulons optimiser, nous pouvons le faire. L'idée est d'utiliser une requête multimédia verticale pour changer le positionnement fixe en positionnement statique lorsqu'il est jugé que la hauteur est inférieure à une certaine hauteur.
@media (hauteur min : 700 px) { .site-header { /* position : fixe ou position : collante */ }}J'ai remarqué ce modèle sur la barre de navigation de Twitter.com. L'idée est de combiner les requêtes média verticales avec le modèle Priority+.
Lorsque la hauteur de la fenêtre d'affichage est redimensionnée, les éléments les moins importants (signets et listes) sont supprimés et ajoutés au menu Plus, ce qui constitue un bon cas d'utilisation pour les requêtes multimédias verticales.
.nav__item--secondary { display: none;}@media (hauteur min: 700px) { .nav__item--secondary { display: block }}Si notre site Web dispose d'une barre latérale ou d'une barre latérale, lorsque la hauteur de la fenêtre d'affichage est petite, nous pouvons réduire l'espacement vertical entre certains éléments de navigation, ce qui améliorera également la conception globale.
Nous savons que la boîte modale doit être centrée au moins horizontalement. Cependant, il faut parfois aussi le centrer verticalement. Nous utilisons généralement la solution suivante :
.modal__body { position : absolue ; gauche : 50 % ; haut : 50 % ; transformer (-50 %, -50 %);
Cependant, il y a un problème lorsque le contenu devient long, le modal remplira l'écran verticalement et l'utilisateur ne pourra pas le faire défiler.
Il y a plusieurs raisons à cette situation :
La boîte modale n'a pas de hauteur et la modale est centrée verticalement (cela entraînera un problème plus rapide)Voici le CSS réparé :
.modal__body { position : absolue ; gauche : 50 % ; haut : 3rem ; transformation : traduireX (-50 %); (hauteur min : 700 px) { .modal__body { top : 50 % ; transform : translate(-50 %, -50 % }});Notez que j'ai utilisé min-height et max-height. min-height consiste à garder le modal beau même si le contenu est court, max-height consiste à limiter sa hauteur en utilisant une valeur spécifique au lieu d'ajouter une hauteur fixe.
Lors de la conception d’une expérience, il est préférable de penser en termes de largeur et de hauteur. Redimensionner votre navigateur verticalement peut être un peu étrange, mais cela présente des avantages. Dans cet article, nous discutons de l'importance des tests verticaux et de la manière dont nous effectuons les tests verticaux. Enfin, nous proposons quelques exemples et cas d'utilisation qui, nous l'espérons, seront utiles aux utilisateurs de smartmi.
Ce qui précède concerne la conception en hauteur des pages Web réactives. Avez-vous besoin de réduire la hauteur du navigateur ? Pour plus de détails, veuillez prêter attention aux autres articles connexes sur ce site !