Utilisation des Media Queries en CSS3

Les Queries
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre HTML 5 et CSS3
Revoir le teaser Je m'abonne
Transcription

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

DescriptionProgrammeAvis

59,90€ Je commande

Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

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.

Apprenez à utiliser les media queries en CSS3 pour optimiser l'affichage de vos sites web sur différents appareils.

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.

Voir plus
Questions réponses
Quels sont les principaux types de média utilisés en CSS3 media queries?
Les principaux types de média sont screen (écran), print (impression), et speech (oral).
Comment définir une règle pour un écran dont la largeur minimale est de 740 pixels?
Pour définir cette règle, utilisez la syntaxe : @media screen and (min-width: 740px) { ... }
Quelle propriété serait utile pour adapter le rendu en fonction de la résolution?
La propriété 'resolution' ou 'min-resolution' peut être utilisée pour adapter le rendu en fonction de la résolution des écrans.

Programme détaillé