Requêtes multimédia CSS3
Requête multimédia CSS3
Type multimédia CSS2
Les règles @media sont introduites dans CSS2 et différentes règles de style peuvent être personnalisées pour différents types de médias.
Par exemple : vous pouvez définir différentes règles de style pour différents types de médias (y compris les moniteurs, les appareils portables, les téléviseurs, etc.).
Mais ces types multimédias ne sont pas assez conviviaux pour être pris en charge sur de nombreux appareils.
Requête multimédia CSS3
La requête multimédia CSS3 hérite de toutes les idées des types multimédia CSS2 : au lieu de rechercher le type d'appareil, affichage adaptatif CSS3 en fonction des paramètres.
Les requêtes multimédias peuvent être utilisées pour détecter de nombreux éléments, tels que :
largeur et hauteur de la fenêtre d'affichage, largeur et hauteur de l'appareil (paysage du smartphone, portrait). Résolution
Actuellement, de nombreux appareils tels que les téléphones Apple, les téléphones Android, les tablettes, etc. utilisent des requêtes multimédia.
Syntaxe de requête multimédia
La requête multimédia se compose d'une variété de médias et peut contenir une ou plusieurs expressions. la condition est vraie. Renvoie vrai ou faux.
@media not|only mediatype et (expressions) {
CSS-Code ;
}
Si le type multimédia spécifié correspond au type d'appareil, le résultat de la requête renvoie true , le document affichera l'effet de style spécifié sur le périphérique correspondant.
À moins d'utiliser les opérateurs pas ou seulement, tous les styles seront adaptés pour s'afficher sur tous les appareils.
not : not est utilisé pour exclure certains appareils spécifiques, tels que @media not print (appareil non-imprimeur).
uniquement : utilisé pour spécifier un type de média spécifique. Pour les appareils mobiles prenant en charge les requêtes multimédias, si le seul mot-clé existe, le navigateur Web de l'appareil mobile ignorera le seul mot-clé et appliquera directement le fichier de style en fonction de l'expression suivante. Pour les appareils qui ne prennent pas en charge Media Queries mais sont capables de lire les navigateurs Web Media Type, ce fichier de style sera ignoré lorsque le seul mot-clé est rencontré.
tous : tous les appareils, cela devrait être vu souvent.
Vous pouvez également utiliser différents fichiers de styles sur différents supports :
Type multimédia CSS3
Valeur >
tous peut être utilisé pour utiliser peut utiliser utiliser utiliser utiliser
discours pour lecteurs d'écran
Exemple simple de requête multimédia
L'utilisation d'une requête multimédia peut être utilisée sur des appareils spécifiés Le correspondant Le style remplace le style d'origine.
Dans l'exemple suivant, la couleur d'arrière-plan est modifiée sur un appareil avec une taille de fenêtre visible à l'écran supérieure à 480 pixels : <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>重置浏览器窗口查看效果！</h1>
<p>如果媒体类型屏幕的可视窗口宽度小于 480 px ，背景颜色将改变。</p>
</body>
</html>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
