Media Queries traditionnelles : Elles se basent sur les dimensions de la fenêtre du navigateur (viewport) pour appliquer différents styles. C'est une approche "globale" qui modifie l'apparence en fonction de la taille de l'écran. Dans notre exemple, la boîte change de couleur selon la largeur de la fenêtre :
Container Queries : C'est une nouvelle fonctionnalité CSS qui permet d'appliquer des styles en fonction de la taille du conteneur parent, plutôt que de la fenêtre du navigateur. C'est une approche plus "locale" et modulaire. Dans notre exemple, la mise en page de la carte s'adapte à la taille de son conteneur, indépendamment de la taille de l'écran. Vous pouvez redimensionner le conteneur pour voir l'effet.
Cette carte s'adapte à la taille de son conteneur. Vous pouvez redimensionner le conteneur en tirant sur son bord droit.