Mises en page fluides

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

Dans la conception web adaptative (responsive web design), une mise en page fluide s'adapte aux différentes tailles d'écran en utilisant des grilles flexibles et des unités relatives comme les pourcentages au lieu de valeurs de pixels fixes. Cela permet à la mise en page de s'étendre ou de se réduire pour s'adapter à n'importe quel écran, garantissant ainsi une expérience utilisateur fluide sur tous les appareils.

Les principes clés des mises en page fluides incluent :

Unités relatives : Utiliser des pourcentages (%), des unités de fenêtre d'affichage (vw, vh) ou des ems (em) au lieu de pixels fixes (px) pour les largeurs, les hauteurs, les marges et les espacements (padding).

Grilles flexibles : Utiliser CSS Grid ou Flexbox pour créer des mises en page basées sur une grille qui peuvent s'adapter à différentes tailles d'écran.

Max-width et min-width : Définir des largeurs maximales et minimales pour les éléments afin de les empêcher de devenir trop larges ou trop étroits sur des tailles d'écran extrêmes.

Voici un exemple d'une mise en page fluide de base utilisant des pourcentages :

.container {
    width: 90%; /* Le conteneur occupe 90 % de la largeur de la fenêtre d'affichage */
    max-width: 1200px; /* Le conteneur ne dépassera pas 1200px */
}
.sidebar {
    width: 30%; /* La barre latérale occupe 30 % de la largeur du conteneur */
    float: left;
}
.main-content {
    width: 70%; /* La zone de contenu principal occupe 70 % de la largeur du conteneur */
    float: left;
}

Dans cet exemple, l'élément .container a une largeur fluide de 90%, ce qui signifie qu'il occupera toujours 90 % de la largeur de la fenêtre d'affichage. La propriété max-width est définie sur 1200px pour empêcher le conteneur de devenir trop large sur les grands écrans.

Les éléments .sidebar et .main-content ont des largeurs fluides de 30% et 70%, respectivement, ce qui leur permet de s'adapter à la largeur du conteneur.

Défi

Facile

On vous donne un document HTML avec une division parente (<div>) qui contient deux divisions enfants (<div>) avec les classes sidebar et main. Votre tâche consiste à créer une mise en page fluide en utilisant des pourcentages. Suivez les étapes ci-dessous :

Écrivez une règle CSS qui cible l'élément <div> avec la classe container. Définissez sa propriété width sur 80% et margin sur 0 auto. Ajoutez une bordure border de 1px solid black pour la visualisation.
Écrivez une règle CSS qui cible l'élément <div> avec la classe sidebar. Définissez sa propriété width sur 25% et faites-le flotter vers la gauche (float left).
Écrivez une règle CSS qui cible l'élément <div> avec la classe main. Définissez sa propriété width sur 75% et faites-le flotter vers la droite (float right).

Aide-mémoire

Une mise en page fluide s'adapte aux différentes tailles d'écran en utilisant des grilles flexibles et des unités relatives comme les pourcentages au lieu de valeurs de pixels fixes.

Principes clés des mises en page fluides :

Unités relatives : Utilisez des pourcentages (%), des unités de fenêtre d'affichage (vw, vh) ou des ems (em) au lieu de pixels fixes
Grilles flexibles : Utilisez CSS Grid ou Flexbox pour des mises en page adaptables
Max-width et min-width : Définissez des limites pour empêcher les éléments de devenir trop larges ou trop étroits

Exemple de mise en page fluide de base :

.container {
    width: 90%; /* Occupe 90 % de la largeur de la fenêtre d'affichage */
    max-width: 1200px; /* Ne dépassera pas 1200px */
}
.sidebar {
    width: 30%; /* 30 % de la largeur du conteneur */
    float: left;
}
.main-content {
    width: 70%; /* 70 % de la largeur du conteneur */
    float: left;
}

Essayez vous-même

<html>
<head>
    <title>Fluid Layouts</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar" style="background-color:#92f0ab">Sidebar</div>
        <div class="main" style="background-color:#92d4f0">Main Content</div>
    </div>
</body>
</html>