Media queries

Les requêtes media désignent une spécification des propriétés en CSS3, qui permet d’adapter la présentation du contenu d’une page Web à des conditions particulières d’affichage selon les écrans (viewport) et une large gamme d’appareils avec les règles @media et @import.

Le choix des media queries est assez subjectif et dépend aussi de l’analyse des terminaux de vos utilisateurs.

Points de rupture standards :

mobile et plus (par défaut)
@media (min-width: 20rem) //pour 320px Format portrait mobile et plus
@media (min-width: 30rem) //pour 480px Paysage mobile et plus grand 
@media (min-width: 36rem) //pour 576px Compromis entre 320px et 768px
@media (min-width: 48rem) //pour 768px tablette portrait et plus grand
@media (min-width: 62rem)/ /pour 992px Tablette paysage, PC portable et plus grand
@media (min-width: 75rem) //pour 1200px ordi écran large et plus grand

Une requête de média filtre les règles selon le type de média optionnel (tous, portable, imprimé, TV, clients email etc.) des expressions optionnelles qui limitent le moment où la requête se déclenche comme la largeur, la densité de pixels ou l’orientation.

En savoir plus

Media queries pour les appareils standards