Mobile d'abord

🎯 Objectif

Écrire le même résultat dans l'autre sens. Et découvrir pourquoi les professionnels ne font plus que ça.

📖 Exemple

Le programme du ciné-club est écrit mobile d'abord : la base décrit le téléphone, le bloc conditionnel ajoute pour le grand écran :

<div class="programme">
    <div class="seance">Lundi · Le Kid</div>
    <div class="seance">Mercredi · Alien</div>
    <div class="seance">Vendredi · Wall-E</div>
    <div class="seance">Samedi · Vertigo</div>
</div>

.programme {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.seance {
    padding: 16px 8px;
    border: 2px solid #d45e95;
    background-color: #ffffff;
    text-align: center;
}

@media (min-width: 700px) {
    .programme {
        grid-template-columns: repeat(4, 1fr);
    }
}

La fenêtre ci-dessus montre une seule colonne, et c'est cohérent : elle est plus étroite que 700 pixels, donc seule la base s'applique. Le raisonnement tient en une phrase : le téléphone est le cas le plus contraint, on part de lui, puis le bloc ajoute de la richesse quand la place existe — ici quatre colonnes, avec la fonction repeat : quatre répétitions d'une part.

Bonus discret : un style de base n'a aucune condition à satisfaire — il s'applique même sur un navigateur trop vieux pour comprendre le bloc, qui affiche alors la version simple, parfaitement utilisable. ♿ Et il sert aussi ceux qui zooment : à 200 %, un grand écran n'a plus que la place d'un téléphone — et reçoit tes styles de base, pensés pour lui.

📝 Consigne

Ta feuille de l'exercice 11.3 fonctionne, mais elle est écrite à l'envers : elle commence par le grand écran, puis défait son travail pour le téléphone. Retourne-la. Dans l'onglet CSS :

1. dans la règle .galerie du haut, mets la valeur du téléphone : les colonnes en une seule part — c'est désormais le style de base
2. supprime entièrement l'ancien bloc conditionnel en largeur maximale, ses deux accolades comprises
3. écris à la place un bloc en largeur minimale, à partir de 768 pixels
4. à l'intérieur, une règle .galerie avec les colonnes en trois répétitions d'une part, écrites avec la fonction repeat

Ne change ni la gouttière, ni le mode grille, ni la règle .photo.