Introduction aux Media Queries
Objectifs
Ce cours vous permettra de :
- Comprendre les fondamentaux des media queries en CSS3.
- Adapter vos sites web pour un rendu optimal sur divers appareils.
- Utiliser des attributs comme min-width et max-width pour des mises en forme réactives.
Résumé
Apprenez à utiliser les media queries en CSS3 pour optimiser l'affichage de vos sites web sur différents appareils.
Description
La spécification CSS3 améliore considérablement la gestion des feuilles de style en fonction du média en permettant de les étiqueter plus précisément. Grâce à ce module, vous pourrez définir des feuilles de style adaptées à différents types d’écrans, qu'ils soient en couleurs ou monochromes, avec des résolutions variées. Vous verrez notamment comment créer des adaptations pour des tailles d'écran spécifiques comme celles des ordinateurs HD (1920 pixels) ou des mobiles (320 pixels pour un iPhone). Les media queries permettent de conditionner l'application d'un style en fonction de critères de taille, par exemple min-width ou max-width. Cela permet d'avoir une seule page HTML avec des mises en forme qui s'adaptent automatiquement entre un ordinateur et un smartphone. La leçon couvre également l'utilisation de différents types de médias comme screen, print et des attributs tels que min-width et min-resolution.