Comment définir la taille du navigateur avec CSS

CSS (Cascading Style Sheets) est un langage utilisé pour décrire le style des pages Web. CSS peut être utilisé pour définir les styles de mise en page, les polices, les couleurs, les arrière-plans et d'autres éléments des pages Web. Parmi eux, la manière de définir la taille du navigateur peut également être réalisée via CSS.

Lors de l'écriture de styles CSS, vous pouvez utiliser la règle "@media" pour définir des requêtes multimédias de différentes tailles afin d'appliquer différents styles en fonction de la taille de l'écran et du type d'appareil. Cette méthode peut modifier la mise en page et la disposition de la page pour obtenir le meilleur effet d'affichage sur différentes tailles d'écran.

Voici quelques façons de définir la taille du navigateur via CSS :

1. Utiliser des requêtes multimédias
   La règle @media est une nouvelle fonctionnalité de CSS3 qui peut définir différents styles en fonction de la largeur ou de la hauteur de l'écran. Grâce aux requêtes multimédias, des styles spécifiques peuvent être définis pour différents appareils. Les exemples sont les suivants :

@media screen et (max-width : 480px) {
body {

background-color: yellow;

}
}

@media uniquement screen et (). min -width : 481px) et (max-width : 768px) {
body {

background-color: blue;

}
}

@média uniquement écran et (min-width : 769px) {
body {

background-color: green;

}
}

this Dans cet exemple, nous utilisons la règle @media pour définir trois requêtes multimédias différentes. Chaque requête multimédia a une largeur d'écran maximale ou minimale qui est utilisée pour déterminer quand appliquer le style. Dans le code ci-dessus, nous définissons la couleur de fond pour trois largeurs d'écran différentes : la couleur de fond d'un écran inférieur ou égal à 480px est jaune, la couleur de fond d'un écran d'une largeur comprise entre 481px et 768px est bleue, et la couleur de fond couleur d'un écran d'une largeur supérieure ou égale à 769px La couleur de fond de l'écran est verte.

2. Utiliser les unités de fenêtre CSS
   Les unités de fenêtre CSS font référence aux unités relatives à la fenêtre (viewport), qui peuvent être stylisées différemment en fonction de la taille de l'écran. La fenêtre d'affichage fait référence à la taille de la zone visible du navigateur. Par exemple, lorsque vous ouvrez une page Web dans le navigateur, la zone que vous voyez est la fenêtre d'affichage.

Voici quelques unités de fenêtre couramment utilisées :

• vw : représente le pourcentage de la largeur de la fenêtre (1vw représente 1 % de la largeur de la fenêtre
• vh : représente le pourcentage de la hauteur de la fenêtre (1vh représente 1) ; % de la hauteur de la fenêtre) );
• vmin et vmax : représentent respectivement les valeurs minimale et maximale en vw et vh.

Par exemple, nous pouvons utiliser l'unité vw pour définir la taille de la police dans la page Web afin qu'elle s'adapte de manière adaptative à la largeur de l'écran. Un exemple est le suivant :

body {
font-size: 2vw;
}

Dans cet exemple, nous définissons la taille de police de tout le texte de la page Web sur 2vw. Cela signifie qu'avec une largeur de fenêtre de 1 000 px, la taille de la police est de 20 px et qu'avec une largeur de fenêtre de 500 px, la taille de la police est de 10 px.

3. Utilisation d'une combinaison de requêtes multimédia CSS et d'unités de fenêtre
   Nous pouvons également combiner les deux méthodes ci-dessus pour définir des styles pour différentes tailles d'écran en spécifiant différentes unités de fenêtre. Par exemple, nous pouvons définir différentes tailles de police pour différentes largeurs d'appareil avec le code suivant :

@media only screen and (max-width : 480px) {
body {

font-size: 16px;

}
}

@media only screen and (largeur min : 481 px) et (largeur maximale : 768 px) {
corps {

font-size: 20px;

}
}

@écran multimédia uniquement et (largeur min : 769 px) {
corps {

font-size: 24px;

}
}

Dans cet exemple, nous définissons trois requêtes multimédias différentes à l'aide de la règle @media pour définir les tailles de police pour différentes largeurs d'écran. Pour les écrans de 480 px ou moins, la taille de police est de 16 px ; pour les écrans entre 481 px et 768 px, la taille de police est de 20 px ; pour les écrans d'une largeur de 769 px ou plus, la taille de police est de 24 px.

Résumé
Grâce à la méthode ci-dessus, nous pouvons utiliser CSS pour définir la taille du navigateur afin que la page Web puisse s'adapter à différentes tailles d'écran et types d'appareils. Ce type de conception adaptative améliore non seulement l’expérience utilisateur, mais améliore également la convivialité et l’accessibilité du site Web.

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!