Ermitteln Sie die Bildschirmgröße in reinem CSS

Wir alle wissen, dass CSS früher der schwierigste Teil der Webentwicklung war. Allerdings ist es heutzutage noch schwieriger geworden.

Sie würden es nicht glauben, aber jetzt kann CSS Eigenschaften definieren, rechnen und sogar direkt die Bildschirmgröße ermitteln! Dieser Artikel zeigt Ihnen, wie es geht.

Eigenschaft definieren

Die @property-Regel ist eine neue Funktion in CSS, die es Entwicklern ermöglicht, benutzerdefinierte Eigenschaften zu erstellen und deren Typen, Vererbung und Anfangswerte festzulegen. Mit dieser Funktion können wir bestimmte Werte lesen und sie an benutzerdefinierte Eigenschaften übergeben.

Im folgenden Beispiel definieren wir zwei benutzerdefinierte Eigenschaften, --w_raw und --h_raw, die die Breite bzw. Höhe des Bildschirms darstellen:

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

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

• Syntax: '' Gibt an, dass der Typ der Eigenschaft eine Länge ist.
• erbt: true gibt an, dass die Eigenschaft vererbt werden kann.
• Der Anfangswert legt den Anfangswert der Eigenschaft auf 100vw und 100vh fest, was der Breite und Höhe des Ansichtsfensters entspricht.

Einheiten entfernen

Jetzt haben wir die Werte für die Bildschirmbreite und -höhe erhalten, sie enthalten jedoch immer noch Einheiten. Wie können wir die Einheiten entfernen, um reine numerische Werte zu erhalten? Es ist eine Frage der Mathematik, daher müssen wir die mathematischen Werkzeuge in CSS verwenden: atan2(y, x) und tan().

• Die Funktion atan2(y, x) gibt den Winkel (im Bogenmaß) von der x-Achse zum Punkt (x, y) zurück.
• Die Funktion tan() berechnet den Tangens eines gegebenen Winkels.

Wenn wir diese kombinieren, können wir die reinen numerischen Werte erhalten. Hier übergeben wir var(--w_raw) und 1px als Parameter, um den Winkel der Breite zu berechnen und ihn dann in eine Zahl umzuwandeln. Auf diese Weise konvertieren wir die Breite und Höhe in einheitenlose Werte und speichern sie in den Variablen von :root.

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

Zahlen anzeigen

Wie zeigen wir die numerischen Werte nun an, da sie in CSS gespeichert sind? Der Zähler zählt!

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

Wir erstellen ein ::before-Pseudoelement im Textkörper, um den CSS-Inhalt anzuzeigen.

• counter-reset initialisiert die Zähler h und w und setzt ihre Werte auf var(--h) und var(--w).
• Inhalt: counter(w) „x“ counter(h); Zeigt den Breiten- und Höhenzähler im Format „Breite x Höhe“ an.

Erledigt!

Jetzt haben Sie einen Bildschirmgrößenindikator, der rein in CSS implementiert ist.

Der Browser aktualisiert --w und --h in Echtzeit und zeigt sie auf der Seite an. Der gesamte Prozess ist völlig JavaScript-frei.

Sie können hier klicken, um die Online-Demo auszuprobieren.

Das obige ist der detaillierte Inhalt vonErmitteln Sie die Bildschirmgröße in reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!