Qu'est-ce que le Responsive Design ?

Fait partie de la section Styling with CSS du Journey HTML de Coddy — leçon 61 sur 76.

En conception Web, le responsive design est une approche qui vise à créer des pages web qui s'adaptent et offrent une expérience de consultation optimale sur une large gamme d'appareils, allant des écrans d'ordinateurs de bureau aux téléphones mobiles. Un site web responsive ajuste automatiquement sa mise en page, son contenu et ses fonctionnalités en fonction de la taille de l'écran, de la résolution et de l'orientation de l'appareil sur lequel il est consulté. L'objectif du responsive design est de s'assurer que les utilisateurs peuvent facilement accéder au site web et interagir avec lui, quel que soit l'appareil qu'ils utilisent.

Le design réactif est réalisé grâce à une combinaison de techniques, notamment :

Grilles et mises en page flexibles : Utiliser CSS grid ou Flexbox pour créer des mises en page qui peuvent s'adapter à différentes tailles d'écran.

Images et médias flexibles : S'assurer que les images et autres médias se redimensionnent proportionnellement à la mise en page.

Media queries : Appliquer différents styles CSS en fonction des caractéristiques de l'appareil, telles que la largeur, la hauteur et l'orientation de l'écran.

Alors que de plus en plus de personnes utilisent des appareils mobiles pour naviguer sur le web, le design réactif est essentiel pour rendre les sites web faciles à utiliser. Il garantit que votre site a une belle apparence et fonctionne bien sur n'importe quel appareil, offrant aux utilisateurs une expérience fluide et cohérente.

Défi

Facile

Vous recevez un document HTML avec un titre (<h1>), un paragraphe (<p>) et deux images (<img>). Votre tâche consiste à ajouter du CSS de base pour rendre les éléments réactifs et démontrer clairement la différence entre une hauteur fixe et une hauteur automatique. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <h1>. Définissez le font-size sur 5vw. Cela rendra la taille de la police du titre réactive à la largeur de la fenêtre d'affichage (viewport).
Écrivez une règle CSS qui cible l'élément <p>. Définissez le font-size sur 3vw. Cela rendra la taille de la police du paragraphe réactive à la largeur de la fenêtre d'affichage (viewport).
Écrivez une règle CSS qui cible la classe .fixed-height. Définissez le width sur 100% et le height sur 150px. Cela créera une image déformée en imposant une hauteur fixe.
Écrivez une règle CSS qui cible la classe .auto-height. Définissez le width sur 100% et le height sur auto. Cela permettra à l'image de se redimensionner proportionnellement tout en conservant son rapport d'aspect.
Écrivez des règles CSS pour les conteneurs (.container) afin de leur donner un width de 300px, un border de 2px solid #ccc, un margin de 20px et un padding de 10px.

Aide-mémoire

Le design réactif (responsive design) crée des pages web qui s'adaptent aux différents appareils et tailles d'écran grâce à des mises en page flexibles, des médias redimensionnables et des requêtes média (media queries).

Techniques clés pour le design réactif :

Grilles et mises en page flexibles : Utilisation de CSS Grid ou Flexbox
Images et médias flexibles : Redimensionnement proportionnel à la mise en page
Requêtes média (media queries) : Application de différents styles en fonction des caractéristiques de l'appareil

Utilisez les unités de fenêtre d'affichage (viewport units) pour une typographie réactive :

h1 {
  font-size: 5vw;
}

p {
  font-size: 3vw;
}

Rendez les images réactives avec un redimensionnement approprié :

/* Hauteur fixe - provoque une distorsion */
.fixed-height {
  width: 100%;
  height: 150px;
}

/* Hauteur automatique - conserve le rapport d'aspect */
.auto-height {
  width: 100%;
  height: auto;
}

Essayez vous-même

<html>
<head>
    <title>What is Responsive Design?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Mount Everest: The World's Highest Peak</h1>
    <p>Mount Everest, standing at 8,848.86 meters (29,031.7 feet), is the tallest mountain on Earth. Located in the Himalayas on the border between Nepal and Tibet, it attracts climbers from around the world. Scaling Everest is a challenging journey due to its extreme weather, thin air, and rough terrain.</p>
    
    <div class="container">
        <h3>Fixed Height (Distorted)</h3>
        <img class="fixed-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Distorted Image">
    </div>
    
    <div class="container">
        <h3>Auto Height (Preserved Aspect Ratio)</h3>
        <img class="auto-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Proper Ratio Image">
    </div>
</body>
</html>