Conception Web Responsive -Media Queries
Les requêtes média sont introduites dans CSS3 :Requêtes média CSS3 @media。
En utilisant les requêtes @media, vous pouvez définir différents styles pour différents types de médias.
Exemple
Si la fenêtre du navigateur est plus petite que 500px, l'arrière-plan deviendra bleu clair :
body {
background-color: lightblue;
}
}
Essayez-le vous-même »
Ajouter des points de rupture
Dans le tutoriel précédent, nous avons utilisé des lignes et des colonnes pour créer des pages web. Elles sont adaptatives, mais elles ne s'affichent pas bien sur les petits écrans.
Les requêtes média peuvent nous aider à résoudre ce problème. Nous pouvons ajouter des points de rupture au milieu de la conception, et différents points de rupture ont différents effets.
Appareils de bureau
Appareils mobiles
Utilisez une requête média pour ajouter un point de rupture à 768px :
Exemple
Lorsque l'écran (la fenêtre du navigateur) est plus petit que 768px, la largeur de chaque colonne est de 100% :
.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 mobiles : */
[class*="col-"] {
width: 100%;
}
}
Essayez-le vous-même »
Conception mobile-first
Le mobile-first signifie qu'il faut prioriser la conception mobile lorsqu'on conçoit pour les ordinateurs de bureau et d'autres appareils.
Cela signifie que nous devons apporter quelques modifications au CSS.
Nous modifions les styles lorsque l'écran est inférieur à 768px, et nous devons également modifier les styles lorsque la largeur de l'écran est supérieure à 768px. Voici un exemple de mobile-first :
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* Pour ordinateur 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%;}
}
Autres points de rupture
Vous pouvez ajouter des points de rupture selon vos besoins.
Nous pouvons également définir des points de rupture pour les tablettes et les téléphones mobiles.
Appareils de bureau
Appareils tablettes
Appareils mobiles
Ajoutez une requête média lorsque l'écran fait 600px, et définissez de nouveaux styles (écran supérieur à 600px mais inférieur à 768px) :
Exemple
Notez que les deux ensembles de styles de classe sont identiques, mais que les noms sont différents (col- et col-m-) :
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* Pour les tablettes : */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* Pour ordinateur 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 »
Le code ci-dessus semble redondant, mais il peut définir automatiquement différents styles en fonction de la taille de l'écran, il est donc encore très nécessaire.
Exemples HTML
Pour les appareils de bureau :
Les première et troisième sections occupent 3 colonnes. La section du milieu occupe 6 colonnes.
Pour les tablettes :
La première occupe 3 colonnes, la deuxième section occupe 9 colonnes, et la troisième occupe 12 colonnes :
<div class="col-3 col-m-3">...</div>
<div class="col-6 col-m-9">...</div>
<div class="col-3 col-m-12">...</div>
</div>
Orientation : Paysage/Portrait
Combiné avec les requêtes média CSS, on peut créer des mises en page qui s'adaptent à l'orientation des différents appareils (paysage, portrait, etc.).
Syntaxe :
orientation：portrait | landscape
- portrait：Indique que la hauteur de la zone visible de la page sur le périphérique de sortie est supérieure ou égale à la largeur.
- landscape：Sauf dans le cas de la valeur portrait, toutes sont en mode paysage.
Exemple
Si l'orientation est paysage, l'arrière-plan sera bleu clair :
body {
background-color: lightblue;
}
}
Essayez-le vous-même »