Obtenir la taille de l'écran en CSS pur

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;
}

• 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));
}

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);
}

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".

Fait!

Vous disposez désormais d'un indicateur de taille d'écran implémenté purement en CSS.

Le navigateur mettra à jour --w et --h en temps réel et les affichera sur la page. L'ensemble du processus est entièrement sans JavaScript.

Vous pouvez cliquer ici pour essayer la démo en ligne.

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!