Didacticiel CSS Media Query - Résolutions standard, points d'arrêt CSS et tailles de téléphone cibles

Dans le passé, créer un site Web était beaucoup plus simple. Aujourd'hui, la mise en page d'un site Web doit s'adapter non seulement aux ordinateurs, mais également aux tablettes, aux appareils mobiles et même aux téléviseurs.

Créer un site Web avec une mise en page adaptable s'appelle Responsive Web Design. Et les requêtes multimédias CSS sont l'une des parties les plus importantes du Responsive Design. Dans cet article, nous allons examiner de plus près les requêtes multimédias et comment les utiliser en CSS.

Si vous préférez, vous pouvez regarder la version vidéo ci-dessous:

Qu'est-ce qu'une requête multimédia?

Une requête multimédia est une fonctionnalité CSS3 qui permet à une page Web d'adapter sa mise en page à différentes tailles d'écran et types de supports.

Syntaxe

@media media type and (condition: breakpoint) { // CSS rules }

Nous pouvons cibler différents types de médias dans diverses conditions. Si la condition et / ou les types de média se rencontrent, les règles à l'intérieur de la requête de média seront appliquées, sinon elles ne le seront pas.

La syntaxe peut sembler compliquée au début, expliquons donc chaque partie une par une en détail ...

@ Règle des médias

Nous commençons à définir des requêtes multimédias avec la règle @media et plus tard, nous incluons des règles CSS à l'intérieur des accolades. La règle @ media est également utilisée pour spécifier les types de supports cibles.

@media () { // CSS rules }

Parenthèse

À l'intérieur de la parenthèse, nous définissons une condition. Par exemple, je souhaite appliquer une taille de police plus grande aux appareils mobiles. Pour ce faire, nous devons définir une largeur maximale qui vérifie la largeur d'un appareil:

.text { font-size: 14px; } @media (max-width: 480px) { .text { font-size: 16px; } }

Normalement, la taille du texte sera de 14 px. Cependant, comme nous avons appliqué une requête multimédia, elle passera à 16 pixels lorsqu'un périphérique a une largeur maximale de 480 pixels ou moins.

Important: placez toujours vos requêtes multimédias à la fin de votre fichier CSS.

Types de médias

Si nous n'appliquons pas de type de média, la règle @ media sélectionne tous les types de périphériques par défaut. Sinon, les types de média viennent juste après la règle @ media. Il existe de nombreux types d'appareils mais nous pouvons les regrouper en 4 catégories:

  • tous - pour tous les types de supports
  • imprimer - pour les imprimantes
  • écran - pour écrans d'ordinateurs, tablettes et téléphones intelligents
  • parole - pour les lecteurs d'écran qui «lisent» la page à voix haute

Par exemple, lorsque je souhaite sélectionner uniquement des écrans, je définirai le mot-clé screen juste après la règle @ media. Je dois également concaténer les règles avec le mot-clé "et":

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

Points d'arrêt

Les points d'arrêt sont peut-être le terme le plus courant que vous entendrez et utiliserez. Un point d'arrêt est une clé pour déterminer quand changer la disposition et adapter les nouvelles règles à l'intérieur des requêtes multimédias. Revenons à notre exemple du début:

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

Ici, le point d'arrêt est de 480px. Désormais, la requête multimédia sait quand définir ou remplacer la nouvelle classe. Fondamentalement, si la largeur d'un périphérique est inférieure à 480px, la classe de texte sera appliquée, sinon ce ne sera pas le cas.

Points d'arrêt courants: existe-t-il une résolution standard?

L'une des questions les plus fréquemment posées est «Quel point d'arrêt dois-je utiliser?». Il existe une tonne d'appareils sur le marché, donc nous ne pouvons pas et nous ne devrions pas définir de points d'arrêt fixes pour chacun d'eux.

C'est pourquoi nous ne pouvons pas dire qu'il existe une résolution standard pour les appareils, mais il existe des points d'arrêt couramment utilisés dans la programmation quotidienne. Si vous utilisez un framework CSS (comme Bootstrap, Bulma, etc.), vous pouvez également utiliser leurs points d'arrêt.

Voyons maintenant quelques points d'arrêt courants pour les largeurs d'appareils:

  • 320px - 480px: appareils mobiles
  • 481px - 768px: iPad, tablettes
  • 769px - 1024px: petits écrans, ordinateurs portables
  • 1025px - 1200px: Ordinateurs de bureau, grands écrans
  • 1201px et plus - Très grands écrans, TV

Comme je l'ai dit ci-dessus, ces points d'arrêt peuvent différer et il n'y a pas de norme exactement définie, mais ce sont des normes couramment utilisées.

Emballer

Le Responsive Design est un incontournable dans le domaine de la conception et du développement Web d'aujourd'hui. Les requêtes multimédias sont l'une des parties les plus importantes de la création de mises en page réactives, et j'espère que vous trouverez mon article utile pour comprendre le fonctionnement des requêtes multimédias.

Si vous souhaitez en savoir plus sur le développement Web, n'hésitez pas à vous abonner à ma chaîne.

Merci pour la lecture!