Conception Web réactive - Requêtes multimédias
Qu'est-ce qu'une requête média ?
La requête média est une technique CSS introduite dans CSS3.
Il utilise la @mediarè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 :
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
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éphoner
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 % :
/* For desktop: */
.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) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
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 inférieure à 768 pixels, nous devrions modifier le design lorsque la largeur devient supérieure à 768 pixels. Cela rendra notre conception Mobile First :
Exemple
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.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%;}
}
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.
Bureau
Tablette
Téléphoner
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-) :
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.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) {
/* For desktop: */
.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%;}
}
Cela peut sembler étrange que nous ayons deux ensembles de classes identiques, mais cela nous donne la possibilité en HTML de décider ce qui se passera avec les 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 :
<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>
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
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
Orientation : Portrait / Paysage
Les requêtes multimédias 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 :
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
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 :
Exemple
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
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 :
Taille de police variable.
Exemple
/* If the screen size is 601px or
more, set the font-size of <div> to 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or
less,
set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
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 .