Media queries are what make modern responsive design possible. With them you can set different styling based on things like a users screen size, device capabilities or user preferences. But how do they work, which ones are there and which ones should you use? Here's the complete guide to media queries.
Flex et Grid ont été conçues dans un monde où le RWD était déjà la norme. Ils permettent donc de ne pas faire systématiquement appel aux mediaqueries !
Les light box, c'est bien pour voir l'image en plus grand. Sauf que sur les mobile, ce n'est pas assez grand !
Une solution avec les media queries
Le RWD et les mediaqueries, c'est impératif
Obtenir une dégradation gracieuse des mediaqueries
Le menu déroulant présenté dans ce tutoriel dans un souci d'accessibilité : les contrastes sont suffisants, il est possible d'agrandir les polices sans "casser" le design, la navigation est possible au clavier via la touche tab et lorsque JavaScript n'est pas activé le menu prend sa forme dépliée.
Galerie de sites utilisant les Media Queries pour modifier l'affichage en fonction de la résolution de l'écran.