Requêtes multimédia CSS3
Types 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, basée sur CSS3 dans les paramètres Affichage adaptatif.
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. on Renvoie vrai ou faux si la condition est vraie.
@media not|only mediatype et (expressions) {
CSS-Code ;
}
Si le type multimédia spécifié correspond au type de périphérique, le résultat de la requête renvoie vrai et 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 (appareils non imprimables).
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
| 值 | 描述 |
|---|---|
| all | 用于所有多媒体类型设备 |
| 用于打印机 | |
| screen | 用于电脑屏幕，平板，智能手机等。 |
| speech | 用于屏幕阅读器 |
Exemple simple de requête multimédia
Utilisez une requête multimédia pour remplacer le style d'origine par le style correspondant sur l'appareil spécifié.
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">
<title>php中文网(php.cn)</title>
<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>Exécutez le programme et essayez-le
L'exemple suivant est disponible à l'écran. Faites flotter le menu sur le côté gauche de la page lorsque la taille de la fenêtre d'affichage est supérieure à 480 pixels :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.wrapper {overflow:auto;}
#main {margin-left: 4px;}
#leftsidebar {float: none;width: auto;}
#menulist {margin:0;padding:0;}
.menuitem {
background:#CDF0F6;
border:1px solid #d4d4d4;
border-radius:4px;
list-style-type:none;
margin:4px;
padding:2px;
}
@media screen and (min-width: 480px) {
#leftsidebar {width:200px;float:left;}
#main {margin-left:216px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div id="main">
<h1>重置浏览器窗口查看效果！</h1>
<p>在屏幕可视窗口尺寸小于 480 像素时将菜单浮动到页面左侧。</p>
</div>
</div>
</body>
</html>Exécutez le programme pour l'essayer
