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.

名称	描述
width	可视化宽度
height	可视化高度
aspect-ratio	视口的宽高比宽高比
orientation	视口的方向
resolution	输出设备的像素密度
prefers-reduced-transparency	透明度设置
grid	设备是否使用网格或位图屏幕
update	输出设备修改内容外观的频率
overflow-block	输出设备如何处理沿块轴溢出视口的内容
overflow-inline	可以滚动沿着内联轴溢出视口的内容

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

<.>

Résumé : Ce qui précède représente l'intégralité du contenu de cet article. J'espère que cet article pourra donner à chacun une certaine compréhension des demandes des 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!