Des styles selon l'écran

🎯 Objectif

Écrire un bloc de CSS qui ne s'applique que sur petit écran. C'est la deuxième brique du responsive, et la seule qui manque encore.

📖 Exemple

Le mur d'affiches du village a deux colonnes… et une condition :

<div class="affiches">
    <div class="affiche">Concert de mai</div>
    <div class="affiche">Tournoi de foot</div>
    <div class="affiche">Fête du village</div>
    <div class="affiche">Troc de vélos</div>
</div>

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

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

@media (max-width: 500px) {
    .affiches {
        grid-template-columns: 1fr;
    }
}

Regarde la fenêtre ci-dessus : elle est plus étroite que 500 pixels, la condition est vraie, le bloc s'applique — le mur passe en une colonne. Une media query est un bloc de CSS sous condition, rien de plus. Et si les deux règles se contredisent, aucune magie : c'est la cascade du module 6 — à poids égal, la dernière écrite gagne. Le bloc se place donc toujours en bas de la feuille, sinon il serait aussitôt écrasé.

Trois pièges dans la syntaxe, et ce sont les trois fautes classiques : l'arobase colle au mot media ; la condition tient entre parenthèses, avec deux points entre la propriété et sa valeur ; et il y a deux accolades à refermer, parce que le bloc contient des règles entières.

Pourquoi commencer par la largeur maximale ? Parce que ton aperçu est un téléphone en permanence : la condition y est toujours vraie, tu vois le bloc agir sans rien faire. Sa jumelle min-width arrive à l'exercice suivant.

📝 Consigne

Le club a une idée précise : trois colonnes sur un vrai écran, mais une seule en dessous de 600 pixels, pour que chaque photo prenne toute la largeur du téléphone. Dans l'onglet CSS :

1. tout en bas, après les deux règles existantes, ouvre un bloc conditionnel @media avec une largeur maximale de 600 pixels
2. à l'intérieur, écris une règle .galerie avec une seule déclaration : les colonnes en une seule part
3. referme les deux accolades — celle de la règle, puis celle du bloc

Ne touche pas à la règle du haut : ses trois colonnes restent la valeur par défaut.