Le guide ultime du développement Web réactif

Introduction

Voici comment vous assurer que vos créations restent flexibles et s'affichent parfaitement sur n'importe quel appareil. Jetons un coup d'œil aux éléments clés à prendre en compte lors de la création d'une application Web réactive.

Unités CSS

CSS propose une variété d'unités, à tel point qu'il peut parfois être déroutant de choisir la bonne.

• px : les unités basées sur les pixels restent les mêmes quelle que soit la taille de l'écran.
• % : les unités basées sur un pourcentage sont relatives à la taille de son élément parent.
• vw et vh : les unités basées sur la largeur/hauteur de la fenêtre sont relatives à la largeur/hauteur de la fenêtre.
• dvw et dvh : les unités dynamiques de largeur et de hauteur de la fenêtre d'affichage sont similaires à vw et vh, mais elles s'ajustent dynamiquement aux changements dans la fenêtre d'affichage, c'est-à-dire lorsque le clavier à l'écran apparaît.
• rem : par rapport à la taille de la police de l'élément racine, offrant une base cohérente pour la mise à l'échelle.
• em : Par rapport à la taille de la police de l'élément actuel, utile pour la mise à l'échelle au sein des composants.
• calc() : Une fonction qui vous permet d'effectuer des calculs avec différentes unités. Par exemple, calc(100% - 20px) peut aider à mélanger les unités relatives et absolues.

Pour une liste complète des unités CSS (même si beaucoup sont rarement utilisées), consultez cette page MDN Web Docs.

---

Images réactives

Il existe plusieurs façons d'améliorer la réactivité de vos images sur le Web.

Utilisation de la largeur et de la hauteur : auto

En définissant une limite de largeur et une hauteur maximales sur automatique, nous pouvons rendre nos images réactives sans modifier le rapport hauteur/largeur de l'image.

img {
    width: 100%; /* or any fixed width */
    height: auto; 
  }

Utilisez max-width au lieu de width si vous souhaitez qu'une image soit réduite, mais jamais plus grande que sa taille d'origine.

Utilisation de l'élément img et de srcset

Que faire si vous avez besoin de différentes versions de la même image pour différentes tailles de fenêtre ou résolutions ? Le La balise avec l'attribut srcset permet au navigateur de sélectionner automatiquement l'image la plus appropriée pour l'appareil.
Veuillez noter que différentes versions ne signifient pas des fichiers identiques mais plutôt des images qui ont été ajustées (par exemple, redimensionnées, compressées) pour s'adapter à différents appareils.

<img src="small.jpg" 
     srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w"
     sizes="(max-width: 600px) 100vw, 
            (min-width: 601px) and (max-width: 1200px) 75vw, 
            (min-width: 1201px) 50vw" 
     alt="Example Image">

• Si la largeur de la fenêtre d'affichage est de 600 px ou moins, le navigateur utilisera small.jpg avec une largeur de 100 vw. Le navigateur utilisera également small.jpg comme image de secours.
• Si la largeur de la fenêtre d'affichage est comprise entre 601px et 1200px, le navigateur utilisera medium.jpg avec une largeur de 75vw.
• Pour toute largeur de fenêtre supérieure à 1 200 px, le navigateur utilisera large.jpg avec une largeur de 50 vw.

Utilisation de l'élément image et de srcset

Et si vous avez besoin de différentes images pour différentes tailles de fenêtre ou résolutions ? L'écran L'élément avec l'attribut srcset vous permet de définir différentes images pour différentes tailles ou résolutions de fenêtre.

<picture>
  <source srcset="small.jpg" media="(max-width: 600px)">
  <source srcset="medium.jpg" media="(max-width: 1200px)">
  <img src="large.jpg" alt="Example image">
</picture>

Dans cet exemple :

• Si la largeur de la fenêtre d'affichage est de 600 px ou moins, le navigateur utilisera small.jpg.
• Si la largeur de la fenêtre d'affichage est comprise entre 601 px et 1 200 px, le navigateur utilisera medium.jpg.
• Pour toute largeur de fenêtre supérieure à 1 200 px, le navigateur utilisera large.jpg.

---

Typographie réactive

Unités relatives

html {
    font-size: 16px;
}
.parent {
    font-size: 2rem; /* 32px (2 * 16px) */
}
.child {
    font-size: 0.5em; /* 16px (0.5 * 32px) */
}

• L'unité em est relative à la taille de la police de l'élément parent. Dans l'exemple ci-dessus, la classe enfant a une taille de police de 16 px car elle correspond à la moitié de la taille de police de l'élément parent, qui est de 32 px.

• L'unité rem est relative à la taille de police de l'élément racine (html). Dans l'exemple ci-dessus, la classe parent a une taille de police de 32 px car elle correspond au double de la taille de police de la racine, qui est de 16 px.

Unités basées sur une fenêtre

h1 {
  font-size: 5vw;
}
h2 {
  font-size: 5vh;
}

• L'unité vw est relative à la largeur de la fenêtre.
• L'unité vh est relative à la hauteur de la fenêtre.

Fonction de serrage

Que faire si vous devez utiliser des unités relatives ou basées sur une fenêtre d'affichage, mais dans une limite minimale et maximale ?
Par exemple, je souhaite que la taille de ma police soit relative à la largeur de la fenêtre, mais la valeur minimale doit être de 12 px et la valeur maximale doit être de 48 px. La fonction de serrage est le choix idéal pour de tels scénarios.

h1 {
  font-size: clamp(12px, 3vw, 48px);
}

---

Mises en page réactives

Boîte flexible

Que se passe-t-il si vous devez aligner des éléments principalement dans des mises en page unidimensionnelles ? (ligne ou colonne)

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

.card-container {
  display: flex; /* Enable flexbox layout */
  justify-content: space-around; /* Space evenly between and around cards */
}
.card {
  background-color: black;
  border: 1px solid white;
  color: white;
  text-align: center;
  padding: 20px;
}

En savoir plus sur Flexbox ici

Grille

Que se passe-t-il si vous devez aligner des éléments principalement dans des mises en page bidimensionnelles ? (ligne et colonne)

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

.card-container {
  display: grid; /* Enable grid layout */
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  grid-template-rows: 1fr 1fr; /* Two equal rows */
  gap: 10px; /* Space between grid items */
  width: 100%; /* Full width of the container */
}
.card {
  background-color: black;
  border: 1px solid white;
  color: white;
  text-align: center;
  padding: 20px;
}

En savoir plus sur Grid ici

---

Requêtes multimédias

Que faire si vous souhaitez appliquer des styles spécifiques lorsqu'un appareil remplit certaines conditions ? Le plus souvent, ces conditions concernent la largeur de l'appareil.

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

.card-container {
  display: flex;
  flex-direction: column; /* Default: single-column layout */
}

/* Media query for tablet devices (min-width: 768px) */
@media (min-width: 768px) {
  .card-container {
    flex-direction: row; /* Change to two-column layout */
  }
  .card {
    flex: 1; /* Equal width for all cards */
  }
}

/* Media query for desktop devices (min-width: 1024px) */
@media (min-width: 1024px) {
  .card {
    flex: 25%; /* Each card takes 25% of the width */
  }
}

Media queries can also be used with other characteristics, such as height, orientation, aspect-ratio, resolution, pointer, prefers-color-scheme, and display-mode.

Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This tag is responsible for giving instructions to the browser on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen width and initial-scale=1.0, which controls the zoom level when the page is first loaded.

Responsive frameworks and component libraries

If you don't want to reinvent the wheel, there are many responsive frameworks available to save time and effort.

• Bootstrap: A widely used framework with pre-designed components for quick responsive site development.

• Tailwind CSS: A utility-first framework that enables fast custom design with utility classes.

• MUI: A React library based on Material Design, offering responsive pre-styled components.

• ShadCN: Focuses on modern, accessible, and customizable responsive components.

• Ant Design: A comprehensive design system by Alibaba for enterprise applications, featuring responsive components.

Designing with a Mobile-First Approach

A mobile-first approach means starting with the design for smaller screens, like smartphones, and then gradually adding more features for larger screens, like tablets and desktops. This way, we ensure that the basic experience works great on mobile, and then you build on that for bigger devices.

.card-container { /* default code is for mobile view */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
  gap: 12px;
}

@media (min-width: 768px) { /* queries/cases are for larger views */
  .card-container {
    flex-direction: row;
    gap: 18px;
  }
}

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!