Responsives Webdesign mit mathematischen CSS-Funktionen beherrschen

Mathe ist gut, Mathe ist großartig, aber möchten Sie Ihre Zeit mit Berechnungen verbringen, wenn Ihr Stylesheet dies für Sie erledigen kann?

CSS enthält drei praktische mathematische Funktionen, die die Art und Weise verändern, wie Sie Ihre Websites gestalten. Wir zeigen Ihnen, wie und warum Sie sie verwenden sollten.

Einführung in Mathe in CSS

CSS ist hauptsächlich deklarativ, aber Überarbeitungen haben Funktionen in die Sprache eingeführt. Es gibt jetzt viele Funktionen in der Spezifikation, und drei der einfachsten mathematischen können sich als sehr nützlich erweisen: calc, max und min.

Sie können verwenden dieses einfache CodePen-Beispiel zu helfen, dem Führer zu folgen.

CSS calc() Mathematische Funktion

Die CSS-Funktion calc() führt eine einfache Berechnung durch und verwendet das Ergebnis als Eigenschaftswert. Das bedeutet, dass Sie Eigenschaften wie Höhe und Breite dynamische Werte zuweisen können, ganz ohne CSS @media-Abfragen.

Diese Funktion unterstützt Addition (+), Multiplikation (*), Subtraktion (-) und Division (/) mit einem einzigen Operator.

Beispiel: Erstellen gleichmäßiger Abstände über Bildschirmgrößen hinweg

Es kann schwierig sein, eine Webseite in verschiedenen Größen gleich aussehen zu lassen, selbst wenn Sie dynamische CSS-Einheiten wie vw und % verwenden. Die CSS-Funktion calc() ändert dies.

Wie Sie im obigen Bild sehen können, hat die Titelleiste, die über den Bildschirm geht, je nach Bildschirmgröße unterschiedliche Abstände. Dies liegt daran, dass wir die Breite auf 80 vw und den Abstand auf 20 vw eingestellt haben; ein variabler Wert.

Wenn wir stattdessen calc() verwenden, können wir den Abstand so einstellen, dass er für alle Bildschirmgrößen gleich ist. Die Eigenschaft, die wir dafür verwenden, sieht so aus:

Breite: calc (100vw - 400px);

Dadurch wird die Breite unserer Titelleiste auf 400 Pixel kleiner als die Breite der Seite festgelegt, wodurch unabhängig von der Größe der Anzeige gleichmäßige Abstände erzeugt werden.

CSS max() Math-Funktion

Die CSS-Funktion max() wählt den höchsten Wert aus einem Pool aus, um einer CSS-Eigenschaft einen Wert hinzuzufügen. Sie können so viele potenzielle Werte hinzufügen, wie Sie möchten, wobei jeder durch ein Komma getrennt wird, aber es wird nur der höchste verwendet.

Beispiel: Höhe der Navigationsleiste einschränken

Eine der größten Herausforderungen beim Responsive Webdesign ist die Orientierung. Eine Website, die auf einem großen Computermonitor im Hochformat funktioniert, muss auch auf einem kleineren mobilen Bildschirm im Hochformat gut aussehen.

Dies kann dazu führen, dass ein Immobilienwert auf dem Desktop gut und auf dem Handy schlecht aussieht, genau wie das obige Bild zeigt. Unsere Navigationsleiste hat eine festgelegte Höhe von 10 vh, aber dadurch sieht die Leiste auf Desktop-Geräten dünn aus.

Wir können die CSS-Funktion max() verwenden, um dieses Problem zu lösen:

Höhe: max (10vh, 80px);

Durch Hinzufügen einer Regel wie dieser können wir eine Mindesthöhe von 80 Pixel für unsere Navigationsleiste festlegen, während der Wert von 10 vh beibehalten wird, wenn er höher ist.

CSS min() Math-Funktion

Die min()-Funktion ist wie die max()-Funktion, aber sie wählt den niedrigsten Wert aus einem Pool, um ihn als Eigenschaftswert zu verwenden.

Beispiel: Festlegen einer maximalen Textgröße

Unabhängig davon, ob Sie einen dynamischen Wert verwenden oder nicht, Textgröße plattformübergreifend erhalten kann schwierig sein. Wir können die CSS-Funktion min() verwenden, um zwei oder mehr potenzielle Eigenschaftswerte für die Textgröße unserer Hauptüberschrift festzulegen, und es wird die kleinste verwendet.

Verwendung einer Schriftgröße: 10vh; -Eigenschaft auf dem Hauptkopfzeilentext in unserem Beispiel lässt den Text auf dem Desktop gut aussehen, aber viel zu groß auf Mobilgeräten.

Um dies zu ändern, können Sie die CSS-Funktion min() verwenden, um eine alternative Größenanpassung bereitzustellen:

Schriftgröße: min (10vh, 10vw);

Dieses Beispiel funktioniert, weil mobile Displays hoch und dünn sind, während Desktop-Monitore breit und kurz sind. Das bedeutet, dass die Anzeigebreite (vw) auf Mobilgeräten kleiner ist als auf Desktops.

Verwenden von Mathematik für responsives Webdesign

Die mathematischen Funktionen, die mit CSS vorinstalliert sind, bieten eine einzigartige Möglichkeit, auf einfache Weise reaktionsschnelle Websites zu erstellen. Sie müssen sie nur richtig einrichten, um loszulegen.

Natürlich gibt es andere Methoden und CSS-Funktionen, die Sie verwenden können, um eine Website zu erstellen, die plattformübergreifend gut aussieht.

So erstellen Sie eine reaktionsschnelle Navigationsleiste mit HTML und CSS

Lesen Sie weiter

Über den Autor