Maison  >  Article  >  interface Web  >  Comment utiliser l'attribut CSS @media

Comment utiliser l'attribut CSS @media

silencement
silencementoriginal
2019-05-29 12:00:063854parcourir

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

Comment utiliser lattribut CSS @media

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn