Verwenden von Medienabfragen in HTML und CSS zum Erstellen reaktionsfähiger Websites

Wenn Sie Websites / Webanwendungen entwickeln möchten, ist es für Ihren Erfolg wichtig zu wissen, wie Sie reaktionsschnelle Designs erstellen.

In der Vergangenheit war die Erstellung von Websites, die sich gut an unterschiedliche Bildschirmgrößen anpassten, ein Luxus, den Websitebesitzer von einem Entwickler verlangen mussten. Der zunehmende Einsatz von Smartphones und Tablets hat jedoch dazu geführt, dass Responsive Design in der Welt der Softwareentwicklung zu einer Notwendigkeit geworden ist.

Die Verwendung von Medienabfragen ist zweifellos der beste Weg, um sicherzustellen, dass Ihre Website / Web-App auf jedem Gerät genau so angezeigt wird, wie Sie es möchten.

Responsive Design verstehen

Kurz gesagt, Responsive Design befasst sich mit der Verwendung von HTML / CSS, um ein Website- / Web-App-Layout zu erstellen, das sich an verschiedene Bildschirmgrößen anpasst. In HTML / CSS gibt es verschiedene Möglichkeiten, um die Reaktionsfähigkeit eines Website-Designs zu erreichen:

• Verwenden von Rem- und Em-Einheiten anstelle von Pixeln (px)
instagram viewer
• Festlegen des Ansichtsfensters / der Skalierung jeder Webseite
• Medienabfragen verwenden

Eine Medienabfrage ist eine Funktion von CSS, die in der CSS3-Version veröffentlicht wurde. Mit der Einführung dieser neuen Funktion erhalten Benutzer von CSS die Möglichkeit, die Anzeige einer Webseite basierend auf der Höhe, Breite und Ausrichtung des Geräts / Bildschirms (Quer- oder Hochformat) anzupassen.

Weiterlesen: Das Spickzettel zu den wesentlichen CSS3-Eigenschaften

Medienabfragen bieten ein Framework zum einmaligen Erstellen und mehrmaligen Verwenden von Code im gesamten Programm. Dies scheint möglicherweise nicht so hilfreich zu sein, wenn Sie eine Website mit nur drei Webseiten entwickeln, aber wenn Sie arbeiten für ein Unternehmen mit Hunderten verschiedener Webseiten. Dies wird eine enorme Zeit Sparer.

Es gibt verschiedene Dinge, die Sie bei der Verwendung von Medienabfragen berücksichtigen müssen: Struktur, Platzierung, Bereich und Verknüpfung.

@media only / not media-type und (Ausdruck) {
/ * CSS-Code * /
}

Die allgemeine Struktur einer Medienabfrage umfasst:

• Das Schlüsselwort @media
• Das nicht / einzige Schlüsselwort
• Ein Medientyp (der entweder Bildschirm, Druck oder Sprache sein kann)
• Das Schlüsselwort "und"
• Ein eindeutiger Ausdruck in Klammern
• CSS-Code in zwei geschweiften und geschlossenen geschweiften Klammern.

Verbunden: Verwenden von CSS zum Formatieren von Dokumenten zum Drucken

@media only screen und (max-width: 450px) {
Körper{
Hintergrundfarbe: blau;
}
}

Im obigen Beispiel wird das CSS-Design (insbesondere eine blaue Hintergrundfarbe) nur auf Gerätebildschirme mit einer Breite von 450 Pixel und darunter angewendet - also im Grunde genommen auf Smartphones. Das Schlüsselwort "nur" kann durch das Schlüsselwort "nicht" ersetzt werden, und dann würde das CSS-Styling in der obigen Medienabfrage nur für Druck und Sprache gelten.

Standardmäßig gilt jedoch eine allgemeine Deklaration für Medienabfragen für alle drei Medientypen, sodass kein Medientyp angegeben werden muss, es sei denn, Sie möchten einen oder mehrere davon ausschließen.

/ * Design für Smartphones * /
@media (maximale Breite: 450px) {
Körper{
Hintergrundfarbe: blau;
}
}

Eine Medienabfrage ist eine CSS-Eigenschaft. Es kann daher nur innerhalb der Styling-Sprache verwendet werden. Es gibt drei verschiedene Möglichkeiten, CSS in Ihren Code aufzunehmen. Nur zwei dieser Methoden bieten jedoch eine praktische Möglichkeit, Medienabfragen in Ihre Programme aufzunehmen - internes oder externes CSS.

Die interne Methode umfasst das Hinzufügen von

Bei der externen Methode wird eine Medienabfrage in einer externen CSS-Datei erstellt und über die mit Ihrer HTML-Datei verknüpft Etikett.

Unabhängig davon, ob Medienabfragen über internes oder externes CSS verwendet werden, gibt es einen Hauptaspekt der Stilsprache, der sich nachteilig auf die Funktionsweise einer Medienabfrage auswirken kann. CSS hat eine Rangfolge. Bei Verwendung eines CSS-Auswahloder in diesem Fall eine Medienabfrage: Jede neue Medienabfrage, die der CSS-Datei hinzugefügt wird, überschreibt die vorherige Abfrage (oder hat Vorrang vor dieser).

Der Standard-Medienabfragecode, den wir oben haben, zielt auf Smartphones ab (450 Pixel breit und darunter). Wenn Sie also einen festlegen möchten Unterschiedlicher Hintergrund für Tablets Sie könnten denken, Sie könnten einfach den folgenden Code zu Ihrer bereits vorhandenen CSS-Datei hinzufügen.

/ * Design für Tablets * /
@media (maximale Breite: 800px) {
Körper{
Hintergrundfarbe: rot;
}
}

Das einzige Problem ist, dass Tablets aufgrund der Rangfolge eine rote Hintergrundfarbe haben und Smartphones jetzt auch eine rote Hintergrundfarbe haben, da 450px und darunter unter 800px liegen.

Eine Möglichkeit, dieses kleine Problem zu lösen, besteht darin, die Medienabfrage für Tablets vor der für Smartphones hinzuzufügen. Letzteres würde Ersteres überschreiben und Sie hätten jetzt Smartphones mit blauer Hintergrundfarbe und Tablets mit roter Hintergrundfarbe.

Es gibt jedoch eine bessere Möglichkeit, ein separates Styling für Smartphones und Tablets zu erzielen, ohne sich um die Rangfolge kümmern zu müssen. Dies ist eine Funktion von Medienabfragen, die als Bereichsspezifikation bezeichnet werden. Hier kann der Entwickler eine Medienabfrage mit der maximalen und minimalen Breite (dem Bereich) erstellen.

/ * Design für Tablets * /
@media (maximale Breite: 800 Pixel) und (minimale Breite: 451) {
Körper{
Hintergrundfarbe: rot;
}
}

Mit dem obigen Beispiel spielt die Platzierung von Medienabfragen in einem Stylesheet keine Rolle mehr, da das Design für Tablets und Smartphones auf zwei separate Sammlungen mit breiter Breite abzielt.

Wenn Sie keine Medienabfragen in Ihren CSS-Code einbetten möchten, gibt es eine alternative Methode, die Sie verwenden können. Diese Methode beinhaltet die Verwendung von Medienabfragen in der Tag einer HTML-Datei, anstatt ein massives Stylesheet zu haben, das die Styling-Einstellungen für enthält Smartphones, Tablets und Computer - Sie können drei separate CSS-Dateien verwenden und Ihre Medienabfragen in erstellen das Etikett.

Das Tag ist ein HTML-Element, mit dem CSS-Stile aus einem externen Stylesheet importiert werden. Dieses Tag verfügt über eine Medieneigenschaft, die genauso funktioniert wie eine Medienabfrage in CSS.

 Haupt-Stylesheet 

 Tablet-Stylesheet 
href = "tablet.css">
 Smartphone-Stylesheet 

Der obige Code sollte in das Feld eingefügt werden

Tag Ihrer HTML-Datei. Jetzt müssen Sie nur noch drei separate CSS-Dateien mit den Dateinamen main.css, tablet.css und Smartphone.css erstellen und anschließend das gewünschte Design für jedes Gerät erstellen.

Der Stil in der Hauptdatei gilt für alle Bildschirme mit einer Breite von mehr als 800 Pixel. Der Stil in der Tablet-Datei gilt Für alle Bildschirme mit einer Breite zwischen 450 und 801 Pixel gilt der Stil in der Smartphone-Datei für alle folgenden Bildschirme 451px.

Wenn Sie es bis zum Ende dieses Artikels geschafft haben, konnten Sie lernen, was Responsive Design ist und warum es nützlich ist. Sie können jetzt Medienabfragen in CSS- und HTML-Dateien identifizieren und verwenden. Darüber hinaus wurden Sie in die Rangfolge in CSS eingeführt und haben gesehen, wie sich dies auf die Funktionsweise Ihrer Medienabfragen auswirken kann.

Bildnachweis: Negativer Raum /Pexels

So legen Sie ein Hintergrundbild in CSS fest

CSS ist ein leistungsstarkes Tool zum Stylen von Webseiten. Wenn Sie lernen, wie Sie ein Hintergrundbild platzieren, lernen Sie viele CSS-Grundlagen.

Weiter lesen

Über den Autor