Explorez l'utilisation du code CSS de requête multimédia

Media Query est une fonctionnalité importante de CSS3, qui permet aux développeurs d'afficher différentes mises en page et styles sur différents écrans d'appareils. Les requêtes multimédias peuvent définir différentes propriétés CSS en fonction de différents appareils pour répondre aux besoins de différents écrans. Dans l’avenir de la conception et du développement Web, les requêtes média deviendront de plus en plus importantes. Dans cet article, nous explorerons l’utilisation du code CSS de requête multimédia.

La syntaxe d'une requête multimédia est la suivante :

@media (media feature) {
    /*CSS styles*/
}

où @media indique au navigateur qu'il s'agit d'une requête multimédia, la fonctionnalité multimédia représente la condition spécifique à reconnaître par la requête multimédia et les styles CSS représentent le style CSS appliqué pour cette condition.

Voici un exemple de requête média :

@media (max-width: 600px) {
    body {
        background-color: red;
    }
}

Donc le code ci-dessus dit que lorsque la largeur de l'appareil est inférieure ou égale à 600px, utilisez une couleur de fond rouge.

Dans les requêtes multimédias, nous pouvons utiliser de nombreuses fonctionnalités multimédias. Voici quelques fonctionnalités multimédias couramment utilisées :

• largeur : Spécifiez la largeur du terminal.
• hauteur : Précisez la hauteur du terminal.
• device-width : Spécifiez la largeur de l'écran du terminal.
• device-height : Spécifiez la hauteur de l'écran du terminal.
• orientation : Spécifie si l'orientation de l'appareil est paysage ou portrait.
• aspect-ratio : Spécifiez le rapport hauteur/largeur de l'écran du terminal.
• résolution : Spécifiez la résolution de l'écran du terminal, etc.

Media query prend non seulement en charge le jugement d'une seule condition, mais permet également le jugement de plusieurs conditions, par exemple :

@media (max-width: 480px) and (orientation: portrait) {
    body {
        background-color: yellow;
    }
}

Le code ci-dessus signifie que lorsque la largeur de l'appareil est inférieure ou égale à 480 px, et l'orientation de l'appareil est portrait, utilisez le jaune comme couleur d'arrière-plan.

Il y a aussi une requête médiatique : pas de requête. La requête not indique qu'à l'exception d'une certaine condition, toutes les autres conditions sont satisfaites. Par exemple :

@media not (min-width: 768px) {
    body {
        font-size: 16px;
    }
}

Le code ci-dessus signifie que lorsque la largeur de l'appareil est inférieure à 768 px, la taille de la police est de 16 px.

Dans le développement réel, nous pouvons également utiliser des virgules pour combiner différentes requêtes multimédias, afin que différentes propriétés CSS puissent être définies pour différents appareils. Par exemple :

@media (min-width: 768px), handheld and (orientation: landscape) {
    body {
        font-size: 20px;
    }
}

Le code ci-dessus signifie que lorsque la largeur de l'appareil est supérieure ou égale à 768 px, ou que l'appareil portable est utilisé en mode paysage, la taille de la police est de 20 px.

Pour résumer, la requête multimédia est l'une des fonctions importantes de CSS3. Elle peut définir les propriétés CSS pour différents appareils en fonction des caractéristiques de l'écran de l'appareil, obtenant ainsi différentes mises en page et styles. Dans le développement réel, nous pouvons utiliser de nombreuses fonctionnalités multimédias différentes pour combiner les requêtes multimédias afin d'obtenir de meilleurs résultats.

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!