date: 2023-09-01
Type: Cours
Projet: Blindcode
Cours: CSSCSS :Utilisation des Media Queries
Les Media Queries sont un élément essentiel du Responsive Design, permettant de définir des styles CSS en fonction des caractéristiques de l'appareil, telles que la largeur de l'écran, la résolution, l'orientation, etc. Voyons comment les utiliser en pratique.
Une Media Query commence par l'instruction @media, suivie de la condition à évaluer, puis des styles CSS à appliquer si la condition est vraie.
Exemple de syntaxe :
@media (condition) {
/* Styles à appliquer si la condition est vraie */
}
max-width, min-width)max-width : Applique les styles lorsque la largeur de l'écran est inférieure ou égale à la valeur spécifiée.
Exemple :
@media (max-width: 768px) {
/* Styles pour les écrans de 768px de large ou moins */
}
min-width : Applique les styles lorsque la largeur de l'écran est supérieure ou égale à la valeur spécifiée.
Exemple :
@media (min-width: 1024px) {
/* Styles pour les écrans de 1024px de large ou plus */
}
min-resolution, max-resolution)min-resolution : Applique les styles lorsque la résolution de l'écran est supérieure ou égale à la valeur spécifiée en DPI (points par pouce).
Exemple :
@media (min-resolution: 300dpi) {
/* Styles pour les écrans haute résolution */
}
max-resolution : Applique les styles lorsque la résolution de l'écran est inférieure ou égale à la valeur spécifiée en DPI.
orientation)orientation: portrait : Applique les styles lorsque l'appareil est en mode portrait (vertical).
orientation: landscape : Applique les styles lorsque l'appareil est en mode paysage (horizontal).
Exemple :
@media (orientation: landscape) {
/* Styles pour les appareils en mode paysage */
}
Vous pouvez combiner plusieurs conditions en utilisant les opérateurs logiques and, not, et only. Par exemple :
@media (min-width: 768px) and (orientation: landscape) {
/* Styles pour les écrans de 768px de large ou plus en mode paysage */
}
Je ne vais pas épiloguer ici, mais il existe une media query qui permet de faire un rendu spécifiquement pour les imprimantes, je vous invite à vous référer à ce chapitre si vous voulez en apprendre plus !
Utilisez les Media Queries pour cibler différents appareils et tailles d'écran.
Concevez d'abord pour les appareils mobiles (approche mobile-first), puis ajoutez des Media Queries pour les écrans plus larges.
Testez votre site avec des outils de développement de navigateur pour simuler différentes conditions.
Inspecteurs de Navigateur : Les navigateurs modernes offrent des outils de développement avec des fonctionnalités pour tester des Media Queries en temps réel.
Adobe XD, Figma, Sketch : Ces outils de conception permettent de prévisualiser votre conception pour différentes tailles d'écran.
Outils en Ligne : Des sites Web tels que "Responsinator" et "Am I Responsive?" vous permettent de visualiser votre site sur différentes tailles d'écran.
créé le 2023-09-01 à 11:21