Tutoriel de conception réactive - Apprenez la conception Web réactive en 5 minutes

Dans cet article, je vais vous apprendre autant de techniques de conception réactive que possible en cinq minutes. Ce n'est évidemment pas suffisant pour l'apprendre correctement, mais cela vous donnera un aperçu des concepts les plus importants, que je définis personnellement comme suit:

  • Unités CSS relatives
  • Requêtes médias
  • Flexbox
  • Typographie réactive

Si vous souhaitez approfondir le sujet par la suite, vous pouvez consulter notre bootcamp de développeur Web réactif sur Scrimba, qui vous permettra de créer des sites Web réactifs à un niveau professionnel.

Mais pour l'instant, commençons par les bases!

Unités CSS relatives

Les unités CSS relatives sont au cœur de la conception Web réactive. Ce sont des unités qui tirent leur valeur d'une autre valeur externe. C'est pratique car cela permet, par exemple, que la largeur d'une image soit basée sur la largeur du navigateur.

Les plus courants sont:

  • %
  • em
  • rem
  • vw
  • vh

Dans cet article, nous commencerons par l'unité de pourcentage %, puis nous examinerons l' remunité dans la dernière section.

Disons que vous avez un site Web très simple, comme celui-ci:

Texte alternatif

Son HTML est juste le suivant:

Welcome to my website

Comme vous pouvez le voir sur le GIF ci-dessous, notre image aura par défaut une largeur fixe:

Texte alternatif

Ce n'est pas particulièrement réactif, alors changeons cela à 70% à la place. Nous allons simplement faire ce qui suit:

.myImg { width: 70%; } 

Cela définit la largeur de l'image à 70 pour cent de la largeur de son parent, qui est la balise. Comme la balise s'étend sur toute la largeur de l'écran, l'image représentera toujours 70% de l'écran lui-même.

Voici le résultat:

Texte alternatif

Et c'est aussi simple que ça de créer une image responsive!

Utilisation de requêtes multimédias pour améliorer l'expérience mobile

Nous avons cependant un problème avec notre mise en page réactive, c'est qu'elle a l'air bizarre sur de très petits écrans. La largeur de 70% est trop réduite lorsqu'elle est visualisée sur mobile. Jetez un œil par vous-même:

Texte alternatif

Améliorer son apparence dans cette situation est une tâche parfaite pour les requêtes multimédias. Ils vous permettent d'appliquer un style différent en fonction, par exemple, de la largeur de l'écran. Nous pouvons essentiellement dire que si l'écran mesure moins de 768 pixels de large, utilisez un style différent.

Voici comment nous créons une requête multimédia en CSS:

@media (max-width: 768px) { .myImage { width: 100% } } 

Ce bloc CSS ne sera appliqué que si la largeur de l'écran est inférieure à 768 pixels.

Voici le résultat:

Texte alternatif

Comme vous pouvez le voir, la page a un point d'arrêt où l'image devient soudainement plus large. C'est alors que le navigateur a une largeur de 768 pixels et que l'image bascule entre 70%et 100%.

Utilisation de Flexbox pour la barre de navigation

La prochaine étape est Flexbox. Vous ne pouvez tout simplement pas en apprendre davantage sur la réactivité sans en savoir plus sur Flexbox. Il a changé le jeu du design réactif lors de son introduction il y a quelques années, car il facilite beaucoup le positionnement des éléments de manière réactive le long d'un axe.

Pour utiliser Flexbox, nous rendrons notre site un peu plus complexe en ajoutant une barre de navigation au-dessus du titre. Voici le HTML pour cela:

 Home About me Contact  

Par défaut, cela ressemblera simplement à ceci.

Texte alternatif

Nos éléments de navigation sont tous pressés sur le côté gauche, ce qui n'est pas ce que nous voulons. Nous voulons qu'ils soient espacés uniformément sur toute la page.

Pour y parvenir, nous allons simplement transformer le conteneur de navigation en une flexbox, puis utiliser la justify-contentpropriété magique .

nav { display: flex; justify-content: space-around; } 

Le display: flextransforme le en une boîte flexible, et le justify-content: space-aroundindique au navigateur que les éléments à l'intérieur de la boîte flexible doivent avoir un espace autour d'eux. Ainsi, le navigateur répartit tout l'espace restant de manière égale autour des trois éléments.

Voici à quoi ça ressemble. Et comme vous le remarquerez, il évolue bien:

Texte alternatif

Typographie réactive: rem

La dernière étape consiste à rendre notre typographie également réactive. Vous voyez, je veux que la barre de navigation et le titre rétrécissent un peu lorsque l'écran mesure moins de 768 pixels de large (notre point d'arrêt de requête multimédia, vous vous souvenez?).

Une façon de procéder serait de réduire toutes les tailles de police dans la requête multimédia, comme ceci:

@media (max-width: 768px) { nav { font-size: 14px; } h1 { font-size: 28px; } } 

Ce n'est cependant pas idéal. Nous pourrions nous retrouver avec plusieurs points d'arrêt dans l'application, et avoir également plusieurs éléments (h2, h3, paragraphes, etc.). En conséquence, nous devrons garder une trace de tous les éléments dans tous les différents points d'arrêt. Ce sera un gâchis!

Cependant, très probablement, ils vont être liés les uns aux autres plus ou moins de la même manière tout au long des différents points d'arrêt. Par exemple, le h1sera toujours plus grand que le paragraph.

Alors, que se passerait-il s'il y avait un moyen d'ajuster un facteur, puis de faire en sorte que les tailles de police soient mises à l'échelle par rapport à ce facteur?

Entrez rems!

A remest fondamentalement ceci: la valeur de la taille de la police que vous avez définie pour votre élément. Aime ça:

html { font-size: 14px; } 

Donc, dans ce document, on reméquivaut à 14px.

Cela signifie que nous pouvons définir toutes nos tailles de police sur notre site Web en remunités, comme ceci:

h1 { font-size: 2rem; } nav { font-size: 1rem; } 

Et ensuite, nous changerons simplement la valeur de la taille de la police pour la balise dans notre requête multimédia. Cela garantira que la taille de la police pour nos éléments h1et   navchangera également.

Voici comment nous modifions notre remvaleur dans une requête multimédia:

@media (max-width: 768px) { html { font-size: 14px } } 

Et juste comme ça, nous avons également un point d'arrêt pour toutes nos tailles de police. Remarquez comment la taille de la police change lorsque la page franchit la marque de 768 pixels:

Texte alternatif

Cela ne fait que cinq minutes, mais vous avez maintenant appris à créer des tailles de police, des images et des éléments de barre de navigation pour répondre à la largeur de la page. C'est plutôt bien, et vous avez fait vos premiers pas pour acquérir les compétences très précieuses de la création de sites Web réactifs.

Si vous souhaitez continuer ce voyage d'apprentissage, je vous recommande de jeter un œil à notre énorme cours Scrimba sur le sujet! Il est enseigné par l'un des enseignants les plus populaires de YouTube sur le sujet et vous mènera à un niveau professionnel dans la conception Web réactive.

Bon codage :)

Merci d'avoir lu! Je m'appelle Per Borgen, je suis le co-fondateur de Scrimba - le moyen le plus simple d'apprendre à coder. Vous devriez consulter notre bootcamp de conception de sites Web réactifs si vous souhaitez apprendre à créer un site Web moderne à un niveau professionnel.