Browserdimensionen mit CSS3 erkennen

Wenn wir direkt in die Welt der starten sich anpassendes Design Es ist wichtig zu wissen, was die neuen Regeln von CSS3, hilft uns dies, die Abmessungen des Bildschirms zu erkennen, auf dem die Website oder Anwendung angezeigt wird.
Eine dieser Regeln ist @Hälfte, die es uns bei entsprechender Kombination von Bedingungen ermöglicht, die Größe des Bildschirms als solchen zu kennen und je nach Ergebnis die entsprechenden Maßnahmen bezüglich seines Designs zu ergreifen.

Verwenden von Medienabfragen

Lass uns einen Code erstellen HTML einfach und dort werden wir unser Stylesheet einfügen, das die Regeln für unsere meine wollen, mal sehen:

 Bildschirmabmessungen erkennen 

Wie wir sehen, handelt es sich um einen recht einfachen Code, es gibt jedoch einige Dinge hervorzuheben. Der erste ist in den Etiketten enthalten Stil, dort haben wir zwei Regeln, die erste besagt, dass aus 600 Pixel die Hintergrundfarbe unseres Textes auf dem Etikett h1 Es wird blau, mal sehen, wenn wir die Größe im Browser ändern und diese Änderung wirksam wird:

Die zweite Regel besagt, dass bei einer maximalen Breite 400 Pixel Die Hintergrundfarbe des Textes ändert sich in Rot, was eine dritte Bedingung anzeigt, da alles unter 400 Pixel rot und über 600 Pixel blau ist. Von 401 bis 599 Pixel wird also die Farbe Weiß standardmäßig beibehalten.

Wenn wir schließlich den Bildschirm unseres Browsers viel weiter verkleinern, geben wir die Regel für unsere rote Hintergrundfarbe ein, mal sehen, wie es aussieht:

Wir sehen dann, dass das Ermitteln der Abmessungen unseres Browsers dank . eine äußerst einfache Aufgabe ist CSS3.