@media
Utilité
Affichage responsive
Infos utiles
En css il est possible de définir une variante de style lorsque l'écran est petit ou très large, ...
Par exemple la barre de menu est masquée et remplacée par un menu "burger" lorsque la taille de l'écran est inférieure à 800px. On appelle cette dimension le point de rupture.
Voir la documentation css mediaqueries
Par exemple la barre de menu est masquée et remplacée par un menu "burger" lorsque la taille de l'écran est inférieure à 800px. On appelle cette dimension le point de rupture.
Voir la documentation css mediaqueries
Exemple de code
Dans cet exemple, on peut définir une largeur de bloc différente en fonction de la taille de l'écran.
Sur un écran d'une largeur supérieure à 800px, chaque bloc a une largeur de 20% (ce qui permet d'afficher 5 blocs sur une ligne)
Sur un écran d'une largeur inférieure à 799px, chaque bloc a une largeur de 33% (ce qui permet d'afficher 3 blocs sur une ligne)
Sur un écran d'une largeur supérieure à 800px, chaque bloc a une largeur de 20% (ce qui permet d'afficher 5 blocs sur une ligne)
@media only screen and (min-width: 800px) { .mon-bloc{width:20%;} }
Sur un écran d'une largeur inférieure à 799px, chaque bloc a une largeur de 33% (ce qui permet d'afficher 3 blocs sur une ligne)
@media only screen and (max-width: 799px) { .mon-bloc{width:33%;} }
Langage
CSS