Syntaxe et points d’arrêt courants

Une requête média englobe des règles CSS et les applique uniquement lorsqu’une condition est vraie. La syntaxe de base :

Les types de média les plus courants :

• all — s’applique à tous les appareils de sortie (par défaut)
• screen — écrans d’ordinateur et de téléphone
• print — aperçu avant impression et impression
• speech — lecteurs d’écran

Les fonctionnalités média décrivent les caractéristiques de l’appareil ou de la zone d’affichage. Fonctionnalités courantes : width, height, orientation, resolution, prefers-color-scheme, hover.

La fonctionnalité la plus utilisée cible les écrans dont la largeur est supérieure ou égale à un seuil. C’est l’approche donnant la priorité au mobile.

Il n’existe pas de points de rupture universellement corrects. Voici un ensemble courant fondé sur les largeurs d’appareils habituelles :

• 480px — grands téléphones
• 768px — tablettes
• 1024px — petits ordinateurs de bureau et tablettes en mode paysage
• 1280px — ordinateurs de bureau standard
• 1536px — grands ordinateurs de bureau

Plutôt que de choisir des points de rupture selon les appareils, la pratique moderne consiste à les placer là où le contenu ne tient plus correctement. Concevez à une taille, redimensionnez, puis ajoutez un point de rupture lorsque la mise en page commence à paraître incorrecte.

Le CSS moderne prend en charge la syntaxe des plages dans les requêtes média, plus lisible que la combinaison de min et max :

Utilisez and pour exiger plusieurs conditions simultanément :

Utilisez not pour nier une requête média. Elle s’applique à tout ce qui ne correspond pas à la requête : c’est la négation NOT.

Séparez plusieurs requêtes par des virgules, comme pour une liste de sélecteurs. Les styles s’appliquent si ANY des requêtes correspond.

L’utilisation d’unités em pour les points de rupture, plutôt que de px, permet à ceux-ci de s’adapter à la préférence de taille de police du navigateur de l’utilisateur, ce qui améliore l’accessibilité.

Quelle requête média correspond aux écrans dont la largeur est d’au moins 1024 px ?

Les requêtes média appliquent conditionnellement le CSS selon les caractéristiques de l’appareil ou de la zone d’affichage. Utilisez min-width pour une approche donnant la priorité au mobile et max-width pour une approche donnant la priorité aux ordinateurs de bureau. Définissez les points de rupture là où le contenu l’exige, et non selon des tailles d’appareils arbitraires. La syntaxe moderne des plages améliore la lisibilité.