Obtenir la taille de l'écran en CSS pur-tutoriel CSS-php.cn

Obtenir la taille de l'écran en CSS pur

PHPz

Libérer： 2024-09-03 10:39:06

original

1068 Les gens l'ont consulté

Nous savons tous que CSS était la partie la plus difficile du développement Web. Cependant, c'est devenu encore plus difficile de nos jours.

Vous ne le croiriez pas, mais désormais CSS peut définir des propriétés, faire le calcul et même obtenir directement la taille de l'écran ! Cet article vous montrera comment procéder.

Définir la propriété

La règle @property est une nouvelle fonctionnalité CSS qui permet aux développeurs de créer des propriétés personnalisées et de définir leurs types, leur héritage et leurs valeurs initiales. Grâce à cette fonctionnalité, nous pouvons lire des valeurs spécifiques et les transmettre à des propriétés personnalisées.

Dans l'exemple ci-dessous, nous définissons deux propriétés personnalisées, --w_raw et --h_raw, représentant respectivement la largeur et la hauteur de l'écran :

@property --w_raw {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vw;
}

@property --h_raw {
  syntax: '<length>';
  inherits: true;
  initial-value: 100vh;
}

Copier après la connexion

syntaxe : '' spécifie que le type de la propriété est une longueur.
hérite : vrai indique que la propriété peut être héritée.
initial-value définit la valeur initiale de la propriété sur 100vw et 100vh, qui correspondent à la largeur et à la hauteur de la fenêtre.

Suppression d'unités

Maintenant, nous avons obtenu les valeurs de largeur et de hauteur de l'écran, mais elles incluent toujours les unités. Comment pouvons-nous supprimer les unités pour obtenir des valeurs numériques pures ? C'est une question de mathématiques, il faut donc utiliser les outils mathématiques en CSS : atan2(y, x) et tan().

La fonction atan2(y, x) renvoie l'angle (en radians) de l'axe des x au point (x, y).
La fonction tan() calcule la tangente d'un angle donné.

En les combinant, nous pouvons obtenir les valeurs numériques pures. Ici, nous passons var(--w_raw) et 1px comme paramètres pour calculer l'angle de la largeur, puis le convertissons en nombre. De cette façon, nous convertissons la largeur et la hauteur en valeurs sans unité et les stockons dans les variables de :root.

:root {
  --w: tan(atan2(var(--w_raw), 1px));
  --h: tan(atan2(var(--h_raw), 1px));
}

Copier après la connexion

Afficher les numéros

Maintenant que les valeurs numériques sont stockées en CSS, comment pouvons-nous les afficher ? C'est le compteur qui compte !

body::before {
  content: counter(w) 'x' counter(h);
  counter-reset: h var(--h) w var(--w);
}

Copier après la connexion

Nous créons un pseudo-élément ::before sur le corps pour afficher le contenu CSS.

counter-reset initialise les compteurs h et w et définit leurs valeurs sur var(--h) et var(--w).
contenu : compteur(w) "x" compteur(h); affiche le compteur de largeur et de hauteur, au format "largeur x hauteur".