So verwenden Sie Medienabfragen in HTML und CSS, um responsive Websites zu erstellen

So verwenden Sie Medienabfragen in HTML und CSS, um responsive Websites zu erstellen

Wenn Sie Websites/Webanwendungen entwickeln möchten, ist es für Ihren Erfolg unerlässlich, zu wissen, wie man responsive Designs erstellt.





In der Vergangenheit war die Erstellung von Websites, die sich gut an unterschiedliche Bildschirmgrößen anpassen, ein Luxus, den Website-Betreiber von einem Entwickler anfordern mussten. Die zunehmende Nutzung von Smartphones und Tablets hat Responsive Design jedoch zu einer Notwendigkeit in der Welt der Softwareentwicklung gemacht.



Die Verwendung von Media Queries ist zweifellos der beste Weg, um sicherzustellen, dass Ihre Website/Web-App auf jedem Gerät genau so aussieht, wie Sie es sich wünschen.





Responsive Design verstehen

Kurz gesagt befasst sich Responsive Design 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 Responsivität in einem Website-Design zu erreichen:

  • Verwenden von rem- und em-Einheiten anstelle von Pixeln (px)
  • Einstellen des Darstellungsbereichs/der Skalierung jeder Webseite
  • Verwenden von Medienabfragen

Was sind Medienanfragen?

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



Weiterlesen: Der Cheat Sheet für wesentliche CSS3-Eigenschaften

Medienabfragen bieten einen Rahmen für die einmalige Erstellung von Code und die mehrfache Verwendung in Ihrem Programm. Dies mag nicht so hilfreich erscheinen, wenn Sie eine Website mit nur drei Webseiten entwickeln, aber wenn Sie für ein Unternehmen mit Hunderten von verschiedenen Webseiten arbeiten, wird sich dies als eine enorme Zeitersparnis erweisen.



Verwenden von Medienabfragen

Bei der Verwendung von Media Queries sind verschiedene Dinge zu beachten: Struktur, Platzierung, Reichweite und Verlinkung.

Die Struktur von Medienanfragen

Beispiel für eine Medienanfragestruktur


@media only/not media-type and (expression){
/*CSS code*/
}

Der allgemeine Aufbau einer Medienabfrage umfasst:



  • Das @media-Schlüsselwort
  • Das nicht/einzige Stichwort
  • Ein Medientyp (der entweder Bildschirm, Druck oder Sprache sein kann)
  • Das Stichwort und
  • Ein einzigartiger Ausdruck in Klammern
  • CSS-Code in geschweiften Klammern zum Öffnen und Schließen.

Verwandt: Verwenden von CSS zum Formatieren von Dokumenten zum Drucken

Beispiel für eine Medienanfrage mit dem einzigen Schlüsselwort


@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}

Das obige Beispiel wendet CSS-Styling (insbesondere eine blaue Hintergrundfarbe) nur auf Gerätebildschirme an, die eine Breite von 450 px und darunter haben – also im Grunde Smartphones. Das Schlüsselwort only kann durch das Schlüsselwort not ersetzt werden, und dann würde das CSS-Styling in der obigen Medienabfrage nur für Print und Sprache gelten.

Standardmäßig gilt jedoch eine allgemeine Medienabfragedeklaration für alle drei Medientypen, sodass Sie keinen Medientyp angeben müssen, es sei denn, Sie möchten einen oder mehrere davon ausschließen.

Beispiel für eine Standard-Medienabfrage


/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}

Die Platzierung von Medienanfragen

Eine Medienabfrage ist eine CSS-Eigenschaft; es kann daher nur innerhalb der Stilsprache verwendet werden. Es gibt drei verschiedene Möglichkeiten, CSS in Ihren Code einzubinden; Allerdings bieten nur zwei dieser Methoden eine praktische Möglichkeit, Medienabfragen in Ihre Programme einzubinden – internes oder externes CSS.

Die interne Methode umfasst das Hinzufügen des Tags zum Tag der HTML-Datei und das Erstellen der Medienabfrage innerhalb der Parameter des Tags.

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

Das Spektrum der Medienanfragen

Unabhängig davon, ob Medienabfragen über internes oder externes CSS verwendet werden, gibt es einen wichtigen Aspekt der Stilsprache, der sich negativ auf die Funktionsweise einer Medienabfrage auswirken kann. CSS hat eine Rangfolgeregel. Wenn Sie einen CSS-Selektor oder in diesem Fall eine Medienabfrage verwenden, überschreibt jede neue Medienabfrage, die der CSS-Datei hinzugefügt wird, die vorherige (oder hat Vorrang vor).

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

Beispiel für eine Tablet-Medienabfrage


/* design for tablets */
@media(max-width: 800px){
body{
background-color: red;
}
}

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

Eine Möglichkeit, dieses kleine Problem zu lösen, wäre, die Medienabfrage für Tablets vor denen 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 einen besseren Weg, um ein separates Styling für Smartphones und Tablets zu erreichen, ohne sich Gedanken über die Rangfolge machen zu müssen. Dies ist eine Funktion von Medienabfragen, die als Bereichsspezifikation bekannt ist, bei der der Entwickler eine Medienabfrage mit der maximalen und minimalen Breite (dem Bereich) erstellen kann.

Tablet-Medienabfrage mit Bereichsbeispiel


/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}

Im obigen Beispiel wird die Platzierung von Medienabfragen innerhalb eines Stylesheets irrelevant, da das Design für Tablets und Smartphones auf zwei separate Breitensammlungen abzielt.

Wenn Sie keine Medienabfragen in Ihren CSS-Code einbetten möchten, können Sie eine alternative Methode verwenden. Bei dieser Methode werden Medienabfragen im Tag einer HTML-Datei verwendet. Anstatt also ein riesiges Stylesheet zu verwenden, das die Stileinstellungen für Smartphones, Tablets und Computer enthält, können Sie drei separate CSS-Dateien verwenden und Ihre Medienabfragen im Tag erstellen.

Das Tag ist ein HTML-Element, das verwendet wird, um CSS-Styling aus einem externen Stylesheet zu importieren. Dieses Tag hat eine Medieneigenschaft, die genauso funktioniert wie eine Medienabfrage in CSS.




href='tablet.css'>


Der obige Code sollte in das Tag Ihrer HTML-Datei eingefügt werden. Jetzt müssen Sie nur noch drei separate CSS-Dateien mit den Dateinamen main.css, tablet.css und smartphone.css erstellen – und dann für jedes Gerät das gewünschte Design erstellen.

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

So finden Sie die IP-Adresse des Druckers Windows 7

Jetzt haben Sie die Werkzeuge, um responsive Designs zu erstellen

Wenn Sie es bis zum Ende dieses Artikels geschafft haben, konnten Sie erfahren, 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 sahen, wie sich diese auf die Funktionsweise Ihrer Medienabfragen auswirken kann.

Bildnachweis: Negativraum/ Pexels

Teilen Teilen Tweet Email So legen Sie ein Hintergrundbild in CSS fest

CSS ist ein mächtiges Werkzeug zum Gestalten von Webseiten. Wenn Sie lernen, wie Sie ein Hintergrundbild platzieren, lernen Sie viele CSS-Grundlagen.

Weiter lesen Verwandte Themen
  • Programmierung
  • Web Entwicklung
  • Web-Design
  • CSS
Über den Autor Kadeisha Kean(21 Artikel veröffentlicht)

Kadeisha Kean ist Full-Stack-Software-Entwicklerin und technische/Technologie-Autorin. Sie hat die ausgeprägte Fähigkeit, einige der komplexesten technologischen Konzepte zu vereinfachen; Herstellung von Material, das von jedem Technikneuling leicht verstanden werden kann. Sie schreibt leidenschaftlich gerne, entwickelt interessante Software und bereist die Welt (durch Dokumentationen).

Mehr von Kadeisha Kean

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um zu abonnieren