Que sont les requêtes multimédias en CSS3

Cet article partagera avec vous une introduction aux requêtes multimédias en CSS3. Il a une certaine valeur de référence et j'espère qu'il sera utile à l'apprentissage de chacun.

La conception Web réactive est de plus en plus populaire de nos jours, mais la conception réactive pose également certains problèmes, tels qu'un chargement lent. Mais il existe maintenant un moyen très efficace de résoudre ce problème. Nous pouvons utiliser la méthode de requête multimédia pour résoudre le problème de l'adaptation du style à différents appareils. Ensuite, nous le présenterons en détail dans l'article.

[Cours recommandés : Tutoriel CSS3]

Requête média

Requête média en CSS3, qui peut appeler différents styles en fonction de la taille de l'appareil de l'utilisateur. Il s'agit d'un moyen simple et efficace de diffuser différents contenus sur différents appareils. Les requêtes les plus couramment utilisées sont celles qui gèrent la hauteur et la largeur de la fenêtre.

Les requêtes multimédias peuvent être utilisées pour les éléments suivants :

(1) Appliquer des styles de manière conditionnelle à l'aide de CSS @media et de règles at.

(2) , et autres éléments HTML pour des médias spécifiques.

(3) Afin de tester et de surveiller l'état du média, utilisez les méthodes Window.matchMedia() et JavaScript.

Types de médias

tous : fonctionne sur tous les appareils.

imprimer : pour les documents paginés et affichés à l'écran en mode aperçu avant impression.

écran : Convient principalement aux écrans.

parole : convient principalement aux synthétiseurs vocaux.

Fonctions multimédias

En raison de contraintes d'espace, nous ne vous montrons que certaines fonctions de requête multimédia.

Exemple :

Vous pouvez utiliser le mot-clé and pour combiner des fonctions multimédias avec des types de médias ou avec d'autres fonctions multimédias, par exemple en limitant les styles aux appareils paysage d'une largeur d'au moins 30 em. long

@media (min-width: 30em) and (orientation: landscape) { ... }

Exemple :

<style>

    @media (max-width: 960px){
    body{
        background: pink;
    }
}
</style>

L'exemple ci-dessus signifie que lorsque la page est inférieure à 960 px, le la page deviendra rose

max-width : représente la largeur maximale Lorsqu'elle est inférieure à cette largeur, la fonction suivante sera appelée

Rendu

<.>

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!