UAA 6    CSS
☰

Media Queries

Les media queries permettent d’adapter l’affichage d’un site web en fonction de la taille de l’écran, de l’orientation ou des préférences de l’utilisateur.

1. Syntaxe de base

@media (max-width: 600px) {
    /* Styles pour petits écrans */
}

2. Mobile-first

/* Styles mobiles */

@media (min-width: 600px) {
    /* Tablette */
}

@media (min-width: 900px) {
    /* Desktop */
}

3. Desktop-first

/* Styles desktop */

@media (max-width: 900px) {
    /* Tablette */
}

@media (max-width: 600px) {
    /* Mobile */
}

4. Exemples utiles

Changer la grille selon la largeur

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

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

Adapter la taille du texte

@media (max-width: 500px) {
    body {
        font-size: 14px;
    }
}

@media (min-width: 1000px) {
    body {
        font-size: 20px;
    }
}

Afficher seulement sur mobile

.mobile-only {
    display: none;
}

@media (max-width: 600px) {
    .mobile-only {
        display: block;
    }
}

5. Résumé