Conception de page web réactive - Requêtes médiatiques

Qu'est-ce que les requêtes média ?

Les requêtes média sont une technologie CSS introduite dans CSS3.

Il est utilisé uniquement lorsque des conditions spécifiques sont remplies @media Règles pour faire référence aux blocs d'attributs CSS.

Exemple

Si la fenêtre du navigateur est de 600px ou moins, la couleur de fond est de couleur bleue claire :

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Essayez-le vous-même

Ajoutez un point de rupture

Un peu plus tôt dans ce tutoriel, nous avons créé une page web contenant des lignes et des colonnes, mais cette page responsive ne paraissait pas bien sur les écrans de petite taille.

Les requêtes média peuvent vous aider. Nous pouvons ajouter un point de rupture où certaines parties du design se comportent différemment des deux côtés du point de rupture.


Ordinateur de bureau

Téléphone

Ajoutez un point de rupture à 768px en utilisant une requête média :

Exemple

Lorsque l'écran (la fenêtre du navigateur) est inférieur à 768px, la largeur de chaque colonne doit être de 100% :

/* Pour les appareils de bureau : */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
  /* Pour les téléphones portables : */
  [class*="col-"] {
    width: 100%;
  }
}

Essayez-le vous-même

Toujours avec un design prioritaire mobile

La priorité mobile (Mobile First) signifie que nous devons d'abord concevoir pour les appareils mobiles avant de concevoir pour les ordinateurs de bureau ou tout autre appareil (ce qui rendra les pages plus rapides sur les appareils plus petits).

Ce qui signifie que nous devons faire quelques améliorations dans le CSS.

Lorsque la largeur est inférieure à 768px, nous devrions modifier le design plutôt que de changer la largeur. Nous avons ainsi procédé à un design 'priorité mobile' :

Exemple

/* Pour les téléphones portables : */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* Pour les ordinateurs de bureau : */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Essayez-le vous-même

Un autre point de rupture

Vous pouvez ajouter plusieurs points de rupture aussi nombreux que vous le souhaitez.

Nous insérerons également un point de rupture entre la tablette et le téléphone.


Ordinateur de bureau

Tablette

Téléphone

Pour cela, nous avons ajouté une requête média (à 600 pixels), et nous avons ajouté un ensemble de nouvelles classes pour les appareils de plus de 600 pixels (mais inférieurs à 768 pixels) :

Exemple

Veuillez noter que les deux groupes de classes sont presque identiques, la seule différence étant le nom (col- et col-s-) :

/* Pour les téléphones portables : */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 600px) {
  /* Pour les tablettes : */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
  /* Pour les ordinateurs de bureau : */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

Il semble étrange d'avoir deux groupes de classes identiques, mais cela nous donne l'opportunité d'utiliser HTML pour décider ce qui se passe pour les colonnes à chaque point de rupture :

Exemple HTML

Pour les ordinateurs de bureau :

Les premières et troisièmes parties couvriront 3 colonnes. La partie centrale couvrira 6 colonnes.

Pour les tablettes :

La première partie couvrira 3 colonnes, la deuxième partie couvrira 9 colonnes, et la troisième partie sera affichée sous les deux premières parties, couvrant 12 colonnes :

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

Essayez-le vous-même

Points de coupure typiques des appareils

Il y a des écrans et des appareils avec des hauteurs et des largeurs différentes, ce qui rend difficile de créer un point de coupure précis pour chaque appareil. Pour simplifier, vous pouvez vous concentrer sur ces cinq groupes :

Exemple

/* Écrans et appareils de très petite taille (téléphones portables, 600px et moins) */
@media only screen and (max-width: 600px) {...} 
/* Écrans et appareils de petite taille (tablettes en mode portrait et téléphones portables, 600 pixels et plus) */
@media only screen and (min-width: 600px) {...} 
/* Écrans et appareils de taille moyenne (tablettes en mode paysage, 768 pixels et plus) */
@media only screen and (min-width: 768px) {...} 
/* Écrans et appareils de grande taille (ordinateurs portables et ordinateurs de bureau, 992px et plus) */
@media only screen and (min-width: 992px) {...} 
/* Écrans et appareils très grands (ordinateurs portables et ordinateurs de bureau, 1200px et plus) */
@media only screen and (min-width: 1200px) {...}

Essayez-le vous-même

Orientation : portrait / paysage

Les requêtes media peuvent également être utilisées pour changer la mise en page de la page en fonction de l'orientation du navigateur.

Vous pouvez définir un ensemble d'attributs CSS qui ne s'appliquent qu'aux largeurs de fenêtre supérieures à leur hauteur, ce qui est ce que l'on appelle le mode "portrait" :

Exemple

Si l'orientation est en mode paysage, le fond de la page est de couleur bleu clair :

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Essayez-le vous-même

Masquer un élément avec une requête media

Une autre utilisation courante des requêtes media est de masquer les éléments sur différentes tailles d'écran :

Exemple

/* Si la taille de l'écran est de 600 pixels ou moins, masquez cet élément */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Essayez-le vous-même

Modifier la taille de la police avec une requête media

Vous pouvez également utiliser les requêtes media pour modifier la taille de la police des éléments sur différentes tailles d'écran :

Exemple

/* Si la taille de l'écran est de 601px ou plus grande, veuillez définir la valeur de font-size du <div> sur 80px */
@media only screen and (min-width: 601px) {}}
  div.example {
    font-size: 80px;
  }
}
/* Si la taille de l'écran est de 600px ou moins, veuillez définir la font-size du <div> sur 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Essayez-le vous-même

Manuel de référence @media CSS

Pour une vue d'ensemble complète de tous les types de média et des caractéristiques/exppressions, veuillez consulter Voir @media règle dans le manuel de référence CSS.