Comment - Points d'arrêt de périphérique typiques
Découvrez comment utiliser les requêtes multimédias pour les points d'arrêt courants des appareils.
Points d'arrêt de périphérique typiques
Il existe des tonnes d'écrans et d'appareils de hauteurs et de largeurs différentes, il est donc difficile de créer un point d'arrêt exact pour chaque appareil. Pour simplifier les choses, vous pouvez cibler cinq groupes communs :
Exemple
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
Pages connexes
Tutoriel CSS : requêtes média CSS
Tutoriel CSS : Exemples de requêtes média CSS
Référence CSS : La règle @media
Tutoriel RWD : conception Web réactive avec requêtes multimédias
Tutoriel JavaScript : La méthode window.matchMedia()