Requêtes multimédias de conception Web réactive
Qu’est-ce qu’une requête média ?
La requête média est une technique CSS introduite dans CSS3.
Il utilise le @media règle pour inclure un bloc de propriétés CSS uniquement si une certaine condition est vraie.
Exemple
Si la fenêtre du navigateur mesure 600 px ou moins, la couleur d’arrière-plan sera bleu clair :
Écran @media uniquement et (largeur maximale : 600 px) {
corps {
couleur de fond : bleu clair ;
}
}
Essayez-le vous-même »
Ajouter un point d’arrêt
Plus tôt dans ce didacticiel, nous avons créé une page Web avec des lignes et des colonnes, et elle était réactive, mais elle n’avait pas l’air bien sur un petit écran.
Les requêtes des médias peuvent aider à cela. Nous pouvons ajouter un point d’arrêt où certaines parties de la conception se comporteront différemment de chaque côté du point d’arrêt.
Bureau
Téléphone
Utilisez une requête multimédia pour ajouter un point d’arrêt à 768 pixels :
Exemple
Lorsque l’écran (fenêtre du navigateur) devient plus petit que 768 px, chaque colonne doit avoir une largeur de 100 % :
/* Pour le bureau : */
.col-1 {largeur : 8,33 % ;}
.col-2 {largeur : 16,66 % ;}
.col-3 {largeur : 25 % ;}
.col-4 {largeur : 33,33 % ;}
.col-5 {largeur : 41,66 % ;}
.col-6 {largeur : 50 % ;}
.col-7 {largeur : 58,33 % ;}
.col-8 {largeur : 66,66 % ;}
.col-9 {largeur : 75 % ;}
.col-10 {largeur : 83,33 % ;}
.col-11 {largeur : 91,66 % ;}
.col-12 {largeur : 100 % ;}
Écran @media only et (max-width : 768px) {
/* Pour les téléphones portables : */
[class*= »col-« ] {
largeur : 100 % ;
}
}
Essayez-le vous-même »
Toujours concevoir pour le mobile d’abord
Mobile First signifie concevoir pour mobile avant de concevoir pour ordinateur de bureau ou tout autre appareil (cela accélérera l’affichage de la page sur les appareils plus petits).
Cela signifie que nous devons apporter quelques modifications à notre CSS.
Au lieu de changer de style lorsque la largeur devient plus petit que 768px, nous devrions changer la conception lorsque la largeur devient plus grand que 768px. Cela rendra notre conception Mobile First :
Exemple
/* Pour les téléphones portables : */
[class*= »col-« ] {
largeur : 100 % ;
}
Écran @media uniquement et (min-width : 768px) {
/* Pour le bureau : */
.col-1 {largeur : 8,33 % ;}
.col-2 {largeur : 16,66 % ;}
.col-3 {largeur : 25 % ;}
.col-4 {largeur : 33,33 % ;}
.col-5 {largeur : 41,66 % ;}
.col-6 {largeur : 50 % ;}
.col-7 {largeur : 58,33 % ;}
.col-8 {largeur : 66,66 % ;}
.col-9 {largeur : 75 % ;}
.col-10 {largeur : 83,33 % ;}
.col-11 {largeur : 91,66 % ;}
.col-12 {largeur : 100 % ;}
}
Essayez-le vous-même »
Un autre point d’arrêt
Vous pouvez ajouter autant de points d’arrêt que vous le souhaitez.
Nous allons également insérer un point d’arrêt entre les tablettes et les téléphones portables.
Pour ce faire, nous ajoutons une autre requête multimédia (à 600 px) et un ensemble de nouvelles classes pour les appareils de plus de 600 px (mais de moins de 768 px) :
Exemple
Notez que les deux ensembles de classes sont presque identiques, la seule différence est le nom (col- et col-s-):
/* Pour les téléphones portables : */
[class*= »col-« ] {
largeur : 100 % ;
}
Écran @media uniquement et (min-width : 600px) {
/* Pour les tablettes : */
.col-s-1 {largeur : 8,33 % ;}
.col-s-2 {largeur : 16,66 % ;}
.col-s-3 {largeur : 25 % ;}
.col-s-4 {largeur : 33,33 % ;}
.col-s-5 {largeur : 41,66 % ;}
.col-s-6 {largeur : 50 % ;}
.col-s-7 {largeur : 58,33 % ;}
.col-s-8 {largeur : 66,66 % ;}
.col-s-9 {largeur : 75 % ;}
.col-s-10 {largeur : 83,33 % ;}
.col-s-11 {largeur : 91,66 % ;}
.col-s-12 {largeur : 100 % ;}
}
Écran @media uniquement et (min-width : 768px) {
/* Pour le bureau : */
.col-1 {largeur : 8,33 % ;}
.col-2 {largeur : 16,66 % ;}
.col-3 {largeur : 25 % ;}
.col-4 {largeur : 33,33 % ;}
.col-5 {largeur : 41,66 % ;}
.col-6 {largeur : 50 % ;}
.col-7 {largeur : 58,33 % ;}
.col-8 {largeur : 66,66 % ;}
.col-9 {largeur : 75 % ;}
.col-10 {largeur : 83,33 % ;}
.col-11 {largeur : 91,66 % ;}
.col-12 {largeur : 100 % ;}
}
Cela peut sembler étrange que nous ayons deux ensembles de classes identiques, mais cela nous donne l’opportunité en HTMLpour décider ce qu’il adviendra des colonnes à chaque point d’arrêt :
Exemple HTML
Pour le bureau :
La première et la troisième section couvriront chacune 3 colonnes. La section du milieu s’étendra sur 6 colonnes.
Pour les tablettes :
La première section s’étendra sur 3 colonnes, la seconde s’étendra sur 9, et la troisième section sera affichée sous les deux premières sections, et elle s’étendra sur 12 colonnes :
Essayez-le vous-même »
Points d’arrêt de périphérique typiques
Il existe des tonnes d’écrans et d’appareils de hauteurs et de largeurs différentes, il est donc difficile de créer un point d’arrêt exact pour chaque appareil. Pour simplifier les choses, vous pouvez cibler cinq groupes :
Exemple
/* Appareils extra petits (téléphones, 600px et moins) */
Écran @media uniquement et (largeur maximale : 600px) {…}
/* Petits appareils (tablettes portrait et grands téléphones, 600 pixels et plus) */
Écran @media only et (min-width : 600px) {…}
/* Appareils moyens (tablettes paysage, 768px et plus) */
Écran @media uniquement et (min-width : 768px) {…}
/* Grands appareils (ordinateurs portables/de bureau, 992px et plus) */
Écran @media uniquement et (min-width : 992px) {…}
/* Périphériques extra larges (grands ordinateurs portables et ordinateurs de bureau, 1200px et plus) */
Écran @media only et (min-width : 1200px) {…}
Essayez-le vous-même »
Orientation : Portrait / Paysage
Les requêtes média peuvent également être utilisées pour modifier la mise en page d’une page en fonction de l’orientation du navigateur.
Vous pouvez avoir un ensemble de propriétés CSS qui ne s’appliqueront que lorsque la fenêtre du navigateur est plus large que sa hauteur, une orientation dite « Paysage »:
Exemple
La page Web aura un fond bleu clair si l’orientation est en mode paysage :
Écran @media uniquement et (orientation : paysage) {
corps {
couleur de fond : bleu clair ;
}
}
Essayez-le vous-même »
Masquer les éléments avec les requêtes multimédias
Une autre utilisation courante des media queries consiste à masquer des éléments sur différentes tailles d’écran :
Je serai caché sur de petits écrans.
Exemple
/* Si la taille de l’écran est de 600 pixels de large ou moins, masquez l’élément */
Écran @media uniquement et (largeur maximale : 600 px) {
div.exemple {
affichage : aucun ;
}
}
Essayez-le vous-même »
Modifier la taille de la police avec les requêtes multimédias
Vous pouvez également utiliser des requêtes multimédias pour modifier la taille de la police d’un élément sur différentes tailles d’écran :
Exemple
/* Si la taille de l’écran est de 601 pixels ou plus, définissez la taille de la police sur 80 pixels */
Écran @media uniquement et (min-width : 601px) {
div.exemple {
taille de police : 80px ;
}
}
/* Si la taille de l’écran est de 600 pixels ou moins, définissez la taille de la police de
sur 30 pixels */
Écran @media uniquement et (largeur maximale : 600 px) {
div.exemple {
taille de police : 30 px ;
}
}
Essayez-le vous-même »
Référence CSS @media
Pour un aperçu complet de tous les types de médias et fonctionnalités/expressions, veuillez consulter la règle @media dans notre référence CSS.
#Requêtes #multimédias #conception #Web #réactive