Requêtes média CSS3

Types de médias CSS2

@mediaLes règles ont été introduites dans CSS2, permettant de personnaliser différentes règles de style pour différents types de médias.

Par exemple : vous pouvez définir différentes règles de style pour différents types de médias (y compris les moniteurs, les appareils portables, les téléviseurs, etc.).

Cependant, ces types de médias ne sont pas encore bien pris en charge sur de nombreux appareils.

Requêtes média CSS3

Les requêtes média CSS3 héritent de toutes les idées des types de média CSS2 : au lieu de rechercher le type d'appareil, CSS3 s'affiche de manière adaptative en fonction des paramètres.

Les requêtes média peuvent servir à détecter de nombreuses choses, par exemple :

• La largeur et la hauteur de la fenêtre d'affichage
• Largeur et hauteur de l'appareil
• Orientation (smartphone paysage, portrait).
• résolution

Actuellement, de nombreux appareils tels que les iPhone, les téléphones Android, les tablettes, etc., utilisent des requêtes média.

Prise en charge des navigateurs

Les nombres dans le tableau indiquent la première version du navigateur qui prend en charge la propriété.

Syntaxe des requêtes média

Une requête média est composée de plusieurs types de média et peut contenir une ou plusieurs expressions. Les expressions renvoient vrai ou faux selon que les conditions sont remplies.

Si le type de média spécifié correspond au type de l'appareil, la requête renvoie true, et le document affichera les effets de style spécifiés sur l'appareil correspondant.

À moins que vous n'utilisiez les opérateurs not ou only, tous les styles s'adapteront pour afficher des effets sur tous les appareils.

• not:not est utilisé pour exclure certains appareils spécifiques, comme @media not print (appareils non liés à l'impression).

• only:Il est utilisé pour spécifier un type de média particulier. Pour les appareils mobiles qui prennent en charge les Media Queries, si le mot-clé only est présent, le navigateur Web de l'appareil mobile ignorera le mot-clé only et appliquera directement le fichier de style en fonction de l'expression suivante. Pour les navigateurs Web qui ne prennent pas en charge les Media Queries mais qui peuvent lire Media Type, lorsqu'ils rencontrent le mot-clé only, ils ignoreront ce fichier de style.

• all:Tous les appareils. Celui-ci devrait être couramment rencontré.

Vous pouvez également utiliser différents fichiers de style sur différents médias :

Types de médias CSS3

Exemples simples de requêtes média

À l’aide de requêtes média, vous pouvez utiliser des styles correspondants sur les appareils spécifiés pour remplacer les styles d’origine.

Dans l’exemple suivant, la couleur d’arrière-plan est modifiée sur les appareils dont la taille de la fenêtre d’affichage de l’écran est inférieure à 480 pixels :

Dans l’exemple suivant, lorsque la taille de la fenêtre d’affichage de l’écran est supérieure à 480 pixels, le menu flotte sur le côté gauche de la page :

Dans l'exemple suivant, lorsque la taille de la fenêtre d'affichage de l'écran est inférieure à 600 pixels, l'élément div est masqué :

Référence @media CSS3

Pour plus de contenu sur les requêtes média, veuillez vous référer aux règles@media.