Cours IT Bases CSS 033_Mise en page responsive

Mise en page responsive

La mise en page responsive est une méthode de conception web qui peut s’adapter à différentes tailles d’écran et appareils. En utilisant une mise en page responsive, on peut maintenir un bon effet d’affichage sur la page web sur différents appareils, que ce soit sur des ordinateurs de bureau, des tablettes ou des téléphones mobiles.

Media Queries

L’utilisation des media queries CSS permet d’appliquer différents styles en fonction des caractéristiques de l’appareil (comme la largeur de l’écran, la hauteur, le type d’appareil, etc.). Cela vous permet de définir différentes mises en page pour différentes tailles d’écran.

Exemple:

1
/* PC */
2
@media (min-width: 992px) {
3
    * {
4
        background: yellow
5
    }
6
}
7
/* Tablette */
8
@media (min-width: 768px) and (max-width: 992px) {
9
    * {
10
        background: red
11
    }
12
}
13
/* Téléphone normal */
14
@media (min-width: 576px) and (max-width: 768px) {
15
    * {
16
        background: green
17
    }
18
}
19
/* Petits écrans */
20
@media (max-width: 576px) {
21
    * {
22
       background: blue
23
    }
24
}

Effet:

Images responsives

Utilisez max-width: 100%; pour vous assurer que les images et les éléments multimédias ne dépassent pas leur conteneur sur les petits écrans. Exemple:

1
    img {
2
      max-width: 100%; /* Largeur maximale de l'image est 100% de l'élément conteneur */
3
      height: auto;    /* Conserver les proportions, éviter la déformation de l'image */
4
    }
5

6
    /* Ajuster la taille de l'image sur les petits écrans */
7
    @media screen and (max-width: 600px) {
8
      img {
9
        max-width: 50%; /* Largeur maximale de l'image est 50% de l'élément conteneur */
10
      }
11
    }

1
    <img src="zhaojian.jpg" alt="Responsive Image">

Effet:

Paramètres du viewport

Utilisez la balise <meta> pour définir le viewport afin de vous assurer que la page est correctement mise à l’échelle sur les appareils mobiles.

Exemple:

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

Cette balise meta indique aux navigateurs mobiles qu’ils doivent définir la largeur du viewport à la largeur de l’appareil et agrandir le document à 100% de sa taille attendue, affichant le document à la taille optimisée pour les appareils mobiles que vous souhaitez.

Avec la balise meta viewport, vous pouvez utiliser plusieurs autres paramètres, mais en général, la ligne ci-dessus est celle que vous voulez utiliser.

• initial-scale: Définit le zoom initial de la page, nous le définissons à 1.
• height: Définit une hauteur spécifique pour le viewport.
• minimum-scale: Définit le niveau de zoom minimum.
• maximum-scale: Définit le niveau de zoom maximum.
• user-scalable: Empêche le zoom s’il est défini sur no.

Évitez d’utiliser minimum-scale, maximum-scale, en particulier user-scalable défini sur no, pour garantir que les utilisateurs peuvent eux-mêmes réduire et agrandir.