La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des écrans
utilisés pour du HTML.
On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à
l'aide de CSS. Les requêtes média (media queries) permettent de modifier l'apparence d'un site en tenant compte de la
taille de l’écran (et de la densité de pixel).
Justifier, centrer, mettre à gauche ou droite un texte
Créer une image ovale à partir d'une image rectangulaire
Créer une image ronde à partir d'une image carrée
Créer une image ronde à partir d'une image rectangulaire
Changer le comportement d'une boite avec la propriété float
Changer le comportement d'une image avec la propriété float
Changer le comportement d'une boite avec les propriétés float et clear
Manipuler le contenu d'une boite avec la propriété overflow
Les positionnements relatif et absolu
Le positionnement Z (au-dessus ou en dessous)
Le positionnement statique (comportement par défaut)
Les sélecteurs avec les combinateurs espace + > ~
Le sélecteur de case à cocher avec la pseudo-classe :checked
Les sélecteurs d'attribut avec les combinateurs ~ $ * ^
Exemple 1 de formulaire sans CSS
Exemple de formulaire avec CSS
Exemple 2 de formulaire sans CSS
Exemple 2 de formulaire avec CSS
Principe d'une requête media queries pour Desktop first
Etape 1 - Mise en place des bases du menu
Etape 2 - Préparatif du menu burger
Etape 3 - Mise en place des media queries
Etape 4 - Afficher / Cacher le menu
Etape 5 - Mise en fonction du menu
Etape 6 - Finalisation du travail
Exemple 2: ajouter des options
Mise en forme des balises structurantes HTML 5 - Desktop First
Mise en place des icônes du menu burger
Mise en forme de la zone Section
Mise en place de la zone Résumé
Arrondir des images rectangulaires
Mise en forme de la zone Résumé
Mise en forme de la zone Footer
Mise en place des métas du fichier index
Création du fichier versailles
Mise en place de la zone Article
Mise en forme du titre de niveau 1
Mise en forme de la zone Article
Adaptation responsive de la zone Article
Mise en place des métas du fichier versailles