Responsive design et media queries — Correction d'exercices

Voici des propositions de solutions en mode console (via readline()). N’hésite pas à les adapter.

#1 — Media Query de base

Change la couleur de fond du body en bleu pour les écrans de moins de 600px de large.

Voir le corrigé

@media (max-width: 600px) {
    body {
        background-color: blue;
    }
}

Par défaut un menu est caché. Affiche-le seulement sur les écrans de plus de 768px.

Voir le corrigé

.menu { display: none; }

@media (min-width: 768px) {
    .menu { display: block; }
}

Quelle unité permet de définir une taille de police relative à la largeur de l'écran ?

Voir le corrigé

L'unité vw (Viewport Width). Exemple : font-size: 5vw;

Passe une direction flex de row à column pour les mobiles.

Voir le corrigé

.container { display: flex; flex-direction: row; }

@media (max-width: 480px) {
    .container { flex-direction: column; }
}

Quelle balise HTML est indispensable pour que le responsive fonctionne sur mobile ?

Voir le corrigé

<meta name="viewport" content="width=device-width, initial-scale=1.0">