Comment utiliser l'attribut CSS @media

Définition et utilisation de l'attribut CSS @media

À l'aide de la requête @media, vous pouvez définir différents styles pour différents types de médias.

@media peut définir différents styles pour différentes tailles d'écran, surtout si vous devez configurer une page réactive, @media est très utile.

Lorsque vous réinitialisez la taille du navigateur, la page sera également restituée en fonction de la largeur et de la hauteur du navigateur.

Exemple

Modifier la couleur d'arrière-plan (background-color) si la largeur du document est inférieure à 300 pixels

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

Syntaxe

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

Vous pouvez également utiliser différentes feuilles de style pour différents médias

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

Types de médias

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!