Quelle est l'utilisation de la requête multimédia en CSS3-Questions et réponses frontales-php.cn

Quelle est l'utilisation de la requête multimédia en CSS3

WBOY

Libérer： 2022-04-28 15:45:22

original

2071 Les gens l'ont consulté

En CSS3, les requêtes multimédias sont utilisées pour définir différents styles pour différents types de médias ou appareils. Différents styles peuvent être définis pour différentes tailles d'écran ou résolutions. La syntaxe est "@media non | uniquement le type de média et (...). {Code de style CSS}".

Quelle est l'utilisation de la requête multimédia en CSS3

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Quelle est l'utilisation de la requête multimédia en CSS3

En utilisant la requête @media, vous pouvez définir différents styles pour différents types de médias ?

@media peut définir différents styles pour différentes tailles d'écran, surtout si vous devez configurer une page réactive, @media est très utile.

Lorsque vous réinitialisez la taille du navigateur, la page sera également restituée en fonction de la largeur et de la hauteur du navigateur.

Les requêtes multimédias peuvent être utilisées pour vérifier de nombreux éléments tels que :

Largeur et hauteur de la fenêtre d'affichage
Largeur et hauteur de l'appareil
Orientation (le téléphone ou la tablette est-il en mode paysage ou portrait ?)
Résolution

La syntaxe est

@media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-Code;
}

Copier après la connexion

pas, seulement et et La signification du mot-clé :

not : Le mot-clé not est de toute façon la signification de l'ensemble de la requête média.
only : le mot-clé only empêche les anciens navigateurs qui ne prennent pas en charge les requêtes multimédias avec des attributs multimédias d'appliquer le style spécifié. Cela n’a aucun impact sur les navigateurs modernes.
and : Le mot-clé and combine des propriétés multimédias avec un type de média ou d'autres propriétés multimédias.

Ils sont tous facultatifs. Cependant, si vous n'en utilisez pas ou seulement, vous devez également préciser le type de média.

Vous pouvez également utiliser différentes feuilles de style pour différents supports, comme ceci:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

Copier après la connexion

example est le suivant:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
body {
    background-color:lightgreen;
}
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}
</style>
</head>
<body>
<p>重置浏览器查看大小。当浏览器窗口的宽度小于 300 像素时，背景颜色会变成淡蓝，否则是淡绿色。<input type="button" onclick="resize_window()" value="查看效果"></p>
<SCRIPT>
<!--
function resize_window() {
        window.open (&#39;http://www.runoob.com/try/demo_source/trycss3_media_example1.htm&#39;,&#39;newwindow&#39;,&#39;height=299,width=299,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no&#39;)
}
//写成一行
-->
</SCRIPT>
</body>
</html>

Copier après la connexion

output )

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!