Analyse des requêtes multimédias de CSS3

Cet article présente principalement les requêtes multimédias CSS3 (la mise en page réactive vous permet de personnaliser différentes résolutions et appareils). Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Médias. Les requêtes sont une fonction très puissante. Elle vous permet de personnaliser différentes résolutions et appareils, et permet aux pages Web que vous créez d'être affichées dans différentes résolutions et appareils sans modifier le contenu Normal, et le style ne sera pas perdu à cause de cela. 🎜>

Media Queries est une fonction très puissante. Elle vous permet de personnaliser différentes résolutions et appareils, et vous permet de créer des pages Web sans modifier le contenu. La page s'affiche normalement sous différentes résolutions et appareils sans perdre de style.

Regardons d'abord un exemple simple :

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

La déclaration médiatique ci-dessus signifie : lorsque la largeur de la page est inférieure ou égale à 600 px, appelez petite. Feuilles de style css pour afficher vos pages Web. Tout d'abord, regardons le contenu de la déclaration médiatique :

1. Écran : Inutile de dire que tout le monde le sait, et fait référence à un type de média
2. il n'y en a pas, seulement, qui seront introduits plus tard
3. (max-width : 600px) : C'est la caractéristique du média.
Afin de mieux comprendre Media Query, revenons à l'exemple précédent : la conversion en css est :

@media screen and (max-width: 600px) { 
选择器 { 
属性：属性值； 
} 
}

En fait, le style dans le fichier small.css est placé dans @media srceen et (max-width;600px){…} entre accolades. Dans la structure de l'instruction ci-dessus, on peut voir que les ensembles d'attributs de Media query et CSS sont très similaires. Les principales différences sont :

1. Media query n'accepte qu'une seule expression logique comme valeur, ou n'a aucune valeur ;
2. Les attributs CSS sont utilisés pour déclarer comment afficher les informations de la page ; tandis que Media Query est une expression utilisée pour déterminer si le périphérique de sortie répond à certaines conditions ;
3. La plupart des Media Query acceptent les préfixes min/max utilisés. pour exprimer sa relation logique, indiquant qu'elle s'applique à des situations supérieures ou égales ou inférieures ou égales à une certaine valeur
4. Les attributs CSS exigent qu'il y ait une valeur d'attribut Media Query ne peut avoir aucune valeur car sa valeur. l'expression ne renvoie que vrai ou faux

Jetons un coup d'œil à l'utilisation spécifique des requêtes multimédias

1 Largeur maximale Largeur maximale

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />

Ce qui précède. indique : lorsque l'écran Lorsqu'il est supérieur ou égal à 900px, le style big.css sera utilisé pour restituer la page web.

2. Utilisation de plusieurs requêtes multimédias

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

La requête multimédia peut être combinée avec plusieurs requêtes multimédias. En d'autres termes, une requête multimédia peut contenir de 0 à plusieurs expressions. L'expression peut contenir de 0 à plusieurs mots-clés, ainsi qu'un type de média. Comme indiqué ci-dessus, cela signifie que lorsque l'écran est compris entre 600 et 900 pixels, le style style.css est utilisé pour afficher la page Web.

3. Largeur de l'écran de sortie de l'appareil Largeur de l'appareil

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

Le code ci-dessus fait référence au style iphone.css qui s'applique à la largeur maximale de l'appareil de 480px, par exemple Pour l'affichage sur l'iPhone, la largeur maximale de l'appareil fait ici référence à la résolution réelle de l'appareil, ce qui signifie la résolution de la zone de visualisation

Nous pouvons utiliser MediaQuery pour fournir des styles spécifiques pour les téléphones Android à différents résolutions, comme celle-ci. Cela peut résoudre le problème de reconstruction de page pour les téléphones Android en raison des différentes résolutions d'écran.

4. Le mot-clé not

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

Le mot-clé not est utilisé pour exclure certains types de médias spécifiés. qui correspondent au périphérique d'expression.

5. Le seul mot-clé

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

seulement est utilisé pour définir un type de média spécifique et peut être utilisé pour exclure les navigateurs qui ne prennent pas en charge les requêtes multimédias. En fait, seul est souvent utilisé pour masquer les feuilles de style pour les appareils qui ne prennent pas en charge Media Query mais prennent en charge Media Type. Les principaux sont : pour les appareils prenant en charge les fonctionnalités multimédias (Media Queries), si le style est appelé normalement, alors il sera traité comme s'il n'existait pas uniquement pour les appareils qui ne prennent pas en charge les fonctionnalités multimédias (Media Queries) mais prennent en charge les médias ; types (Media Type), cela Le style n'est pas lu car il lit uniquement au lieu de l'écran. De plus, les navigateurs qui ne prennent pas en charge Media Qqueries n'utiliseront pas le style, qu'ils le prennent uniquement en charge.

6. Autres Si le type de média n'est pas explicitement spécifié dans Media Query, la valeur par défaut est all, par exemple :

<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />

De plus, les virgules (, ) est utilisé pour indiquer la juxtaposition ou ou, comme suit

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

Le style style.css dans le code ci-dessus est utilisé sur les appareils portables d'une largeur inférieure ou égale à 480 px, ou utilisé pour les largeurs d'écran supérieures supérieur ou égal à 960px sur l’appareil.

C'est tout pour cette section sur l'utilisation de Media Query. Enfin, résumons ses fonctions. Personnellement, je pense que ce n'est qu'une phrase : les Media Queries peuvent utiliser différents styles dans différentes conditions et utiliser des pages pour obtenir différents effets de rendu.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de la méthode d'affichage centré réactif de l'image de la bannière CSS

Implémentation et code de test de l'ombre interne et de l'ombre externe compatibles IE

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!