Qu’est-ce que le responsive design ?

Fait partie de la section Style avec CSS du Journey HTML de Coddy. Leçon 61 sur 76.

Dans la conception web, la conception adaptative est une approche qui vise à créer des pages web qui s’adaptent et offrent une expérience de visualisation optimale sur une large gamme d’appareils, des écrans d’ordinateur de bureau aux téléphones mobiles. Un site web adaptatif ajuste automatiquement sa mise en page, son contenu et ses fonctionnalités en fonction de la taille, de la résolution et de l’orientation de l’écran de l’appareil sur lequel il est consulté. L’objectif de la conception adaptative est de garantir que les utilisateurs puissent 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 disposez d’un document HTML contenant un titre (<h1>), un paragraphe (<p>) et deux images (<img>). Votre tâche consiste à ajouter du CSS de base pour rendre les éléments responsifs et 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 la taille de police sur 5vw. Cela rendra la taille de police du titre responsive par rapport à la largeur de la fenêtre d’affichage.
Écrivez une règle CSS qui cible l’élément <p>. Définissez la taille de police sur 3vw. Cela rendra la taille de police du paragraphe responsive par rapport à la largeur de la fenêtre d’affichage.
Écrivez une règle CSS qui cible la classe .fixed-height. Définissez la largeur sur 100% et la hauteur 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 la largeur sur 100% et la hauteur sur auto. Cela permettra à l’image de se redimensionner proportionnellement tout en conservant ses proportions.
Écrivez des règles CSS pour les conteneurs (.container) afin de leur attribuer une largeur de 300px, une bordure de 2px solid #ccc, une marge de 20px et un remplissage intérieur de 10px.

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>