Grids Fluides

display: grid;

Appliqué à notre section (<section class="grid-container"> dans notre HTML), cette propriété a activé le système de grille.

Mais nous avons signifié grid-template-columns: 1fr 1fr; À ce stade, les éléments sont contenus en 2 colonnes peu importe la taille de l’écran.

Pour y remédier, modifions ce paramètre: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

auto-fit : Ajuste le nombre de colonnes automatiquement en fonction de la largeur disponible.

Cela signifie que sur des écrans plus larges, vous verrez plus de colonnes, et sur des écrans étroits, le nombre de colonnes se réduit pour s’adapter sans créer de débordement horizontal.

minmax(200px, 1fr) : Définit une taille minimale de 200px et une taille maximale flexible (1fr signifie 1 fraction de l’espace disponible) pour chaque colonne.

Cela assure que le contenu reste lisible et bien espacé, quelle que soit la taille de l’écran.

Images Flexibles

Afin de garantir que nos images se comportent de manière responsive et s’intègrent harmonieusement dans le layout sans causer de problèmes de débordement ou de distorsion :

img { max-width: 100%; height: auto; }

max-width: 100% : Permet à l’image de se réduire pour s’adapter à la largeur du conteneur, mais ne s’agrandira pas au-delà de sa taille originale, évitant ainsi les distorsions.

height: auto : Ajuste automatiquement la hauteur de l’image en proportion avec sa largeur, préservant l’aspect ratio de l’image.

Appliqué à toutes les images (<img> dans notre HTML), cette règle CSS s’assure que les images ne dépassent jamais la largeur de leur conteneur.

Les Media Queries

Les média queries permettent d’appliquer des styles conditionnels en fonction de caractéristiques spécifiques de l’appareil, telles que la largeur de l’écran.

Elles sont essentielles pour adapter notre site aux différents appareils, assurant une expérience utilisateur optimale sur mobiles, tablettes, et ordinateurs.

Rendre notre Header Responsive

Pour démontrer l’utilisation des média queries, nous allons modifier notre en-tête pour qu’il s’adapte mieux aux écrans de petite taille.

L’objectif est de conserver une mise en page claire et accessible, même sur les smartphones.

C’est un exemple concret de la manière dont les média queries peuvent être utilisées pour améliorer l’expérience utilisateur en rendant le design de notre site réellement responsive.

<header>
<a href="#">Titre du Site</a>
<img src="logo.png" alt="Logo du Site">
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">À propos</a></li>
</ul>
</nav>
</header>

@media (max-width: 600px) {
 header {
 flex-direction: column; text-align: center;
 }
nav ul {
 flex-direction: column; padding: 0; 
}
 nav ul li {
 margin: 10px 0; } }

Explication

Dans les média queries : Nous définissons un seuil de 600px.

Si l’écran est plus petit que cette largeur, les styles à l’intérieur de la média query seront appliqués.

flex-direction: column; pour <header> : Modifie la disposition des éléments du header pour qu’ils soient empilés verticalement, améliorant ainsi la visibilité sur les écrans étroits.

Modification de la disposition du menu : Changeons la disposition des éléments du menu (<nav>) pour qu’ils soient également empilés verticalement.

Cela rend le menu plus accessible sur les petits écrans, où l’espace horizontal est limité.

J’en profite également pour faire quelques ajustements de marges pour un meilleur rendu !

Ces ajustements assurent que notre en-tête reste fonctionnel et esthétique sur tous les appareils, en adaptant dynamiquement sa mise en page en fonction de la taille de l’écran.