interface Web
tutoriel CSS
Comment changer la couleur d'arrière-plan d'une fenêtre d'affichage plus large spécifique en CSS ?
Comment changer la couleur d'arrière-plan d'une fenêtre d'affichage plus large spécifique en CSS ?
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.
Taille de l'écran
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.
Exemple
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>
Demandes des médias et règles des médias
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
Exemple
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>
Conclusion
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
1359
52
Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques
Mar 08, 2025 am 09:45 AM
Ceci est le 3ème article d'une petite série que nous avons faite sur l'accessibilité. Si vous avez manqué le deuxième article, consultez "Gestion de la mise au point des utilisateurs avec: Focus-visible". Dans
Ajout d'ombres de boîte aux blocs et éléments WordPress
Mar 09, 2025 pm 12:53 PM
Le CSS Box-Shadow et les propriétés de contour ont gagné le thème. Laissez regarder quelques exemples de la façon dont cela fonctionne dans des thèmes réels et des options que nous devons appliquer ces styles aux blocs et éléments WordPress.
Travailler avec GraphQL Caching
Mar 19, 2025 am 09:36 AM
Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou
Faire votre première transition Svelte personnalisée
Mar 15, 2025 am 11:08 AM
L'API de transition Svelte fournit un moyen d'animer les composants lorsqu'ils entrent ou quittent le document, y compris les transitions Svelte personnalisées.
Barbars CSS personnalisés chics et cool: une vitrine
Mar 10, 2025 am 11:37 AM
Dans cet article, nous plongerons dans le monde des barres de défilement. Je sais, ça ne semble pas trop glamour, mais croyez-moi, une page bien conçue va de pair
Show, ne dit pas
Mar 16, 2025 am 11:49 AM
Combien de temps passez-vous à concevoir la présentation de contenu pour vos sites Web? Lorsque vous écrivez un nouveau blog ou créez une nouvelle page, pensez-vous à
Que diable sont les commandes NPM?
Mar 15, 2025 am 11:36 AM
Les commandes NPM exécutent diverses tâches pour vous, soit en tant que processus unique ou en cours d'exécution pour des choses comme le démarrage d'un serveur ou la compilation de code.
Construire une application Ethereum à l'aide de Redwood.js et de la faune
Mar 28, 2025 am 09:18 AM
Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum
