CSS-Lernprogramm für Medienabfragen - Standardauflösungen, CSS-Haltepunkte und Zieltelefongrößen

In der Vergangenheit war das Erstellen einer Website viel einfacher. Heutzutage sollte sich das Layout einer Website nicht nur an Computer anpassen, sondern auch an Tablets, mobile Geräte und sogar Fernseher.

Das Erstellen einer Website mit einem anpassbaren Layout wird als Responsive Web Design bezeichnet. Und CSS-Medienabfragen sind einer der wichtigsten Bestandteile von Responsive Design. In diesem Artikel werden wir uns die Medienabfragen und ihre Verwendung in CSS genauer ansehen.

Wenn Sie es vorziehen, können Sie sich die folgende Videoversion ansehen:

Was ist eine Medienabfrage?

Eine Medienabfrage ist eine CSS3-Funktion, mit der eine Webseite ihr Layout an verschiedene Bildschirmgrößen und Medientypen anpasst.

Syntax

@media media type and (condition: breakpoint) { // CSS rules }

Wir können verschiedene Medientypen unter verschiedenen Bedingungen ansprechen. Wenn die Bedingung und / oder die Medientypen erfüllt sind, werden die Regeln in der Medienabfrage angewendet, andernfalls nicht.

Die Syntax mag am Anfang kompliziert erscheinen, also lassen Sie uns jeden Teil einzeln im Detail erklären ...

@ Medienregel

Wir beginnen mit der Definition von Medienabfragen mit der @ media-Regel und fügen später CSS-Regeln in geschweifte Klammern ein. Die @ media-Regel wird auch verwendet, um Zielmedientypen anzugeben.

@media () { // CSS rules }

Klammer

In der Klammer setzen wir eine Bedingung. Zum Beispiel möchte ich eine größere Schriftgröße für mobile Geräte anwenden. Dazu müssen wir eine maximale Breite festlegen, die die Breite eines Geräts überprüft:

.text { font-size: 14px; } @media (max-width: 480px) { .text { font-size: 16px; } }

Normalerweise beträgt die Textgröße 14px. Da wir jedoch eine Medienabfrage angewendet haben, ändert sich diese auf 16 Pixel, wenn ein Gerät eine maximale Breite von 480 Pixel oder weniger hat.

Wichtig: Platzieren Sie Ihre Medienabfragen immer am Ende Ihrer CSS-Datei.

Medientypen

Wenn wir keinen Medientyp anwenden, wählt die @ media-Regel standardmäßig alle Gerätetypen aus. Andernfalls werden Medientypen direkt nach der @ media-Regel angezeigt. Es gibt viele Arten von Geräten, aber wir können sie in 4 Kategorien einteilen:

  • all - für alle Medientypen
  • Drucken - für Drucker
  • Bildschirm - für Computerbildschirme, Tablets und Smartphones
  • Sprache - für Bildschirmleser, die die Seite laut vorlesen

Wenn ich beispielsweise nur Bildschirme auswählen möchte, setze ich das Schlüsselwort screen direkt nach der @ media-Regel. Ich muss die Regeln auch mit dem Schlüsselwort "und" verketten:

@media screen and (max-width: 480px) { .text { font-size: 16px; } }

Haltepunkte

Haltepunkte sind möglicherweise der häufigste Begriff, den Sie hören und verwenden werden. Ein Haltepunkt ist ein Schlüssel, um zu bestimmen, wann das Layout geändert und die neuen Regeln in den Medienabfragen angepasst werden müssen. Kehren wir zu Beginn zu unserem Beispiel zurück:

@media (max-width: 480px) { .text { font-size: 16px; } }

Hier beträgt der Haltepunkt 480px. Jetzt weiß die Medienabfrage, wann die neue Klasse festgelegt oder überschrieben werden muss. Wenn die Breite eines Geräts kleiner als 480 Pixel ist, wird die Textklasse grundsätzlich angewendet, andernfalls nicht.

Häufige Haltepunkte: Gibt es eine Standardauflösung?

Eine der am häufigsten gestellten Fragen lautet „Welchen Haltepunkt soll ich verwenden?“. Es gibt eine Menge Geräte auf dem Markt, daher können und sollten wir keine festen Haltepunkte für jedes dieser Geräte definieren.

Aus diesem Grund können wir nicht sagen, dass es eine Standardauflösung für Geräte gibt, aber es gibt einige häufig verwendete Haltepunkte in der täglichen Programmierung. Wenn Sie ein CSS-Framework (wie Bootstrap, Bulma usw.) verwenden, können Sie auch deren Haltepunkte verwenden.

Sehen wir uns nun einige allgemeine Haltepunkte für die Breite von Geräten an:

  • 320px - 480px: Mobile Geräte
  • 481px - 768px: iPads, Tablets
  • 769px - 1024px: Kleine Bildschirme, Laptops
  • 1025px - 1200px: Desktops, große Bildschirme
  • 1201px und mehr - Extra große Bildschirme, Fernseher

Wie ich oben sagte, können diese Haltepunkte unterschiedlich sein und es gibt keinen genau definierten Standard, aber dies sind einige häufig verwendete.

Einpacken

Responsive Design ist ein Muss im heutigen Bereich Webdesign und -entwicklung. Medienabfragen sind einer der wichtigsten Teile beim Erstellen von reaktionsschnellen Layouts. Ich hoffe, Sie finden meinen Beitrag hilfreich, um zu verstehen, wie Medienabfragen funktionieren.

Wenn Sie mehr über die Webentwicklung erfahren möchten, können Sie meinen Kanal abonnieren.

Danke fürs Lesen!