Nous pouvons déterminer l'appareil que nous utilisons en utilisant ce que nous appelons la largeur de la « fenêtre d'affichage ».
En infographie, la fenêtre d'affichage fait généralement référence à la zone polygonale (généralement rectangulaire) que l'utilisateur regarde actuellement. Lorsque nous parlons de fenêtre d'affichage dans un Navigateur Web, nous faisons généralement référence à une fenêtre dans laquelle le contenu est visible et l'utilisateur ne peut pas voir le contenu en dehors de la fenêtre.
Fondamentalement, il existe deux types de fenêtres.
La fenêtre fixe sur laquelle le navigateur dessine la page Web entière est appelée fenêtre de mise en page.
La partie de la fenêtre de mise en page qui est actuellement visible en raison de la mise à l'échelle ou de toute autre raison est appelée la fenêtre visuelle.
Il s’agit essentiellement de la largeur et de la hauteur physiques de l’appareil. Il existe de nombreux appareils avec différentes tailles d'écran ; en fonction de la taille de l'écran, la façon dont les utilisateurs interagissent avec les pages Web change. Alors, quelle est la relation entre la taille de l’écran et la largeur de la fenêtre.
Quel que soit l'appareil, les utilisateurs sont plus habitués au défilement vertical, c'est pourquoi nous utilisons la largeur de la fenêtre d'affichage pour classer les appareils, car la largeur maximale qu'une fenêtre de présentation peut avoir est limitée par la physique de l'appareil. largeur.
À ce stade, nous savons ce que sont les « fenêtres » et comment elles sont liées à la taille de l'écran. Si nous voulons une page Web réactive qui change de style après une largeur spécifique, nous devons définir la fenêtre d'affichage à l'aide de la balise méta viewport.
Cette balise indique au navigateur comment contrôler la taille et la mise à l'échelle de la page. La valeur méta de la fenêtre d'affichage width=device-width indique à la page d'ajuster sa largeur (en pixels indépendants du périphérique) pour qu'elle corresponde à la largeur de l'écran.
Les pages peuvent utiliser toute la largeur du paysage en ajoutant la valeur initial-scale=1, qui demande au navigateur d'établir une relation 1:1 entre les pixels CSS et les pixels indépendants de l'appareil, quelle que soit l'orientation de l'appareil.
Vous trouverez ci-dessous un exemple de définition de la fenêtre d'affichage en utilisant la largeur de l'appareil et une échelle initiale de 1.
<!DOCTYPE html> <html lang="en"> <head> <title>Example of Viewport</title> </head> <body> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque earum in iste non animi itaque debitis sint! Repellat vero aliquid ullam. Aliquid voluptates recusandae praesentium numquam reiciendis, ullam aliquam nostrum! </p> </body> </html>
Nous savons que nous pouvons utiliser la largeur de la fenêtre d'affichage pour déclencher des changements de style, nous allons maintenant discuter des requêtes multimédias en CSS. Vous pouvez utiliser des requêtes multimédias pour appliquer des styles CSS en fonction du type général d'appareil (comme l'impression ou l'écran) ou d'autres détails (tels que la résolution de l'écran ou la largeur de la fenêtre d'affichage du navigateur). Nous utilisons des requêtes multimédias pour accomplir les tâches suivantes −
Appliquer les styles sous condition.
Lorsque nous devons cibler une forme spécifique de média
Ou lorsque nous voulons tester ou devons surveiller l'état des médias
Pour utiliser les requêtes multimédias, nous devons spécifier notre type de média cible et notre fonctionnalité cible. Nous pouvons également exploiter des opérateurs logiques pour créer des requêtes multimédias très complexes. On peut aussi utiliser pour ne pas inverser le sens d’une requête média, ce qui peut s’avérer très pratique dans certaines situations. Regardons un exemple de requête multimédia.
@media print {
color: black;
font-size: larger;
}
La requête multimédia ci-dessus ne sera appliquée qu'aux supports de type imprimé et changera la couleur en noir et augmentera la taille de la police.
Un exemple de requête multimédia complexe est donné ci-dessous.
@media (min-width: 30em) and (orientation: landscape)
{Color: black;
Font-size: larger;
}
La requête ci-dessus convient aux médias d'une taille d'au moins 30 em et d'une orientation paysage.
Règles des médias −
La partie dans laquelle nous spécifions les types de médias et leurs caractéristiques est souvent appelée règles des médias.
Vous trouverez ci-dessous les différents opérateurs logiques pouvant être utilisés dans les règles multimédias -
Non
Aussi
ou
Vous trouverez ci-dessous un exemple de code pour résoudre le problème actuel à l'aide de requêtes multimédias.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
background-color: rgb(223, 241, 223);
font-size: 20px;
}
@media only screen and (max-width: 750px) {
body {
background-color: aliceblue;
}
}
</style>
</head>
<body>
<h1>Example of media query to change background color</h1>
<p>Please resize the browser window to see a change in background color. </p>
</body>
</html>
Pour résumer, en utilisant des requêtes multimédias en CSS, vous pouvez modifier la couleur d'arrière-plan sur une fenêtre d'affichage plus large spécifique. Il vous suffit de spécifier la largeur de la fenêtre et de l'utiliser dans le code pour définir différentes couleurs d'arrière-plan pour des tailles de fenêtre spécifiques. Cela vous permettra de créer des conceptions de sites Web optimisées pour chaque type d’appareil et taille d’écran, ce qui est crucial pour offrir une expérience utilisateur exceptionnelle.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
