Un exemple très simple

1. La maquette

Nous allons créer une mise en page très simple pour bien illustrer la mise en place des requêtes de média.

Voici la maquette de la page pour les écrans d’ordinateur :

images/C06-007b.png
  • Nous avons un en-tête qui affiche un titre.

  • Une zone centrale qui affiche 6 blocs de texte sur 2 lignes et 3 colonnes.

  • Un pied de page avec deux blocs.

Voici la maquette de la page pour les écrans de tablette :

images/C06-008b.png
  • Nous avons un en-tête qui affiche un titre.

  • Une zone centrale qui affiche 6 blocs de texte sur 3 lignes et 2 colonnes.

  • Un pied de page avec un seul bloc.

Voici la maquette de la page pour les écrans de smartphone :

images/C06-009b.png
  • Nous avons toujours notre en-tête.

  • Une zone centrale qui affiche 6 blocs de texte sur 6 lignes et 1 colonne.

  • Un pied de page avec un seul bloc.

Vous retrouvez cet exemple dans le dossier à télécharger Chapitre-05/exemple-simple/.

2. Le code HTML et CSS

Voici la structure HTML utilisée :


<!DOCTYPE html> 
<html lang="fr"> 
<head> 
    <title>Ma mise en page</title> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <link href="style.css" rel="stylesheet" /> 
</head> 
<body> 
<div class="container"> 
    <header> 
        <h1>Salutantibus...
Pour consulter la suite, découvrez le livre suivant :
couv_OW2RWD5HTM.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
La notion de viewport
Suivant
Les propriétés CSS pour des images responsive