Responsive (Media queries)

ou comment adapter son site pour les différentes tailles d'écrans

Le Responsive Design consiste à adapter l’apparence d’un site web à différentes tailles d’écrans. Avec la diversité des appareils modernes (ordinateurs, tablettes, mobiles), il est crucial de rendre chaque site agréable et fonctionnel sur chaque taille d'écran. Pour cela, on utilise les Media Queries en CSS, qui permettent d’appliquer des styles spécifiques selon la largeur de l’écran.

La règle @media

La règle @media en CSS permet de créer des styles qui s'appliquent sous certaines conditions. Voici quelques exemples :

Taille de l'écran

@media screen and (max-width: 780px){
    /*  styles pour les écrans de moins de 780px */
}

ou

@media screen and (min-width: 780px){
    /*  styles pour les écrans de plus de 780px */
}

Orientation de l'appareil

@media (orientation: landscape) {
    /* styles pour les écrans en mode paysage */
}

ou

@media (orientation: portrait) {
    /* styles pour les écrans en mode portrait */
}

Résolution et Impression

On peut également définir des conditions en fonction de la résolution avec @media screen and (max-resolution: 99dpi). De plus, tu peux spécifier des règles pour l'impression avec @media print.

Ces deux pratiques sont rarement utilisées, donc on ne s'y attardera pas.

L'essentiel à retenir est d'utiliser @media screen avec les précisions min-width ou max-width.

Tailles conventionnelles :

• Mobile : 0 à 480px
  • @media screen and (max-width: 480px)
• Tablette : 481px à 768px
  • @media screen and (max-width: 768px)
• Petit écran : 769px à 1024px
  • @media screen and (max-width: 1024px)

Tu peux bien entendu utiliser les tailles que tu souhaites.

Par exemple, si tu as un élément qui te dérange à 865px, tu peux ajouter une règle @media screen and (max-width: 865px). Les valeurs ci-dessus sont conventionnelles, mais n’hésite pas à les adapter selon tes besoins.

Utilisation concrète

Prenons un exemple simple, si nous souhaitons que le fond du document complet, soit le fond du body soit en bleu sur large desktop, en rouge sur petit desktop, en jaune sur tablette et en vert sur mobile. Voici comment s'écrit nos règles CSS pour l'obtenir :

    /* Style défini de base, soit pour large écran */
    body {
        background: blue;
    }

    /* Styles défini pour petit desktop */
    @media screen and (max-width: 1024px) {
        body {
            background: red;
        }
    }

    /* Styles défini pour tablette */
    @media screen and (max-width: 768px) {
        body {
            background: yellow;
        }
    }

    /* Styles défini pour mobile */
    @media screen and (max-width: 480px) {
        body {
            background: green;
        }
    }

Par exemple, si l’élément .bouton est déjà stylé de manière satisfaisante pour les grands écrans et que sur mobile seule le font-sizechange. Dans notre @mediaon ne retrouver que cette propriété là, voici le code qui illustre ces propos :

.bouton {
    background: black;
    border: none;
    color: white;
    border-radius: 15px;
    padding: 10px 20px;
    font-size: 16px;
}

et que sur mobile, le seul changement nécessaire au .bouton et le font-size, on aura dans notre @media ceci :

@media screen and (max-width: 480px) {
    .bouton {
        font-size: 16px;
    }
}