Comment créer : Points de coupure d'appareils typiques

Apprenez à utiliser les requêtes média pour les points de coupure d'appareils courants.

Points de coupure d'appareils typiques

Il existe de nombreux écrans et appareils de différentes hauteurs et largeurs, donc il est difficile de créer des points de coupure précis pour chaque appareil.

Pour simplifier les opérations, vous pouvez localiser cinq catégories courantes :

Exemple

/* Écrans extrêmement petits (téléphones portables, 600px et moins) */
@media only screen and (max-width: 600px) {...}
/* Écrans petits (tablettes verticales et téléphones portables grands écrans, 600px et plus) */
@media only screen and (min-width: 600px) {...}
/* Écrans moyens (tablettes horizontales, 768px et plus) */
@media only screen and (min-width: 768px) {...}
/* Écrans grands (portables et ordinateurs de bureau, 992px et plus) */
@media only screen and (min-width: 992px) {...}
/* Écrans ultra-grands (portables de grande taille et ordinateurs de bureau, 1200px et plus) */
@media only screen and (min-width: 1200px) {...}

Essayez-le vous-même

Pages liées

Tutoriel :Requête média CSS

Tutoriel :Exemple de requête média CSS

Manuel de référence :Règle @media CSS

Tutoriel :Mettre en œuvre un design Web responsive via des requêtes média

Manuel de référence :Méthode JavaScript window.matchMedia()