Règle @media CSS

La règle @media peut être utilisée pour définir des règles de style pour plusieurs types de média dans un même feuille de style. Elle doit être suivie d'une liste de types de média séparés par des virgules et d'un bloc contenant les règles.

Avec la règle @media, vous pouvez définir des styles différents pour différents types de média.

@media peut définir différents styles pour différentes tailles d'écran, en particulier si vous avez besoin de configurer une page responsive, @media est très utile.

Lorsque vous redéfinissez la taille du navigateur, la page est également redessinée en fonction de la largeur et de la hauteur du navigateur.

Syntaxe de l'utilisation de la règle @media CSS

La syntaxe de cette règle est la suivante :

@media　media　type,...　{
　　　　/*　média-règles spécifiques　*/
}

Vous pouvez également utiliser des styles CSS différents pour différents médias :

<link　rel="stylesheet"　media="mediatype　and|not|only　(media　feature)"　href="style.css">

Les exemples suivants montrent comment utiliser l'attribut @media.

@media　screen{
body　{
color:　#32cd32;
		　　font-family:　Arial,　sans-serif;
font-size:　14px;
}
}
@media　print　{
body　{
color:　#ff6347;
		　　font-family:　Times,　serif;
font-size:　12pt;
}
}
@media　screen,　print　{
body　{
line-height:　1.2;
}
}

Type de média

Fonction multimédia

Compatibilité du navigateur

Compatibilité des navigateurs pour la propriété @media ; les numéros dans le tableau suivant représentent la version minimale du navigateur prenant en charge cette propriété ; toutes les navigateurs populaires prennent en charge cette règle.

Lisez davantage

Veuillez consulter les tutoriels suivants :Types de média CSS.