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)
- Festlegen des Ansichtsfensters / der Skalierung jeder Webseite
- Medienabfragen verwenden
Was sind Medienabfragen?
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.
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 für ein Unternehmen mit Hunderten verschiedener Webseiten arbeiten, wird dies eine enorme Zeitersparnis bedeuten.
Verwenden von Medienabfragen
Es gibt verschiedene Dinge, die Sie bei der Verwendung von Medienabfragen berücksichtigen müssen: Struktur, Platzierung, Bereich und Verknüpfung.
Die Struktur von Medienabfragen
Beispiel einer Medienabfragestruktur
@media only/not media-type and (expression){
/*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.
Beispiel einer Medienabfrage mit dem einzigen Schlüsselwort
@media only screen and (max-width: 450px){
body{
background-color: blue;
}
}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.
Beispiel für eine Standard-Medienabfrage
/*design for smartphones*/
@media(max-width: 450px){
body{
background-color: blue;
}
}Die Platzierung von Medienabfragen
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 des <style> -Tags zum <head> -Tag der HTML-Datei und das Erstellen der Medienabfrage innerhalb der Parameter des <style> -Tags.
Bei der externen Methode wird eine Medienabfrage in einer externen CSS-Datei erstellt und über das <link> -Tag mit Ihrer HTML-Datei verknüpft.
Der Bereich der Medienabfragen
Unabhängig davon, ob Medienabfragen über internes oder externes CSS verwendet werden, gibt es einen Hauptaspekt der Styling-Sprache, der sich nachteilig auf die Funktionsweise einer Medienabfrage auswirken kann. CSS hat eine Rangfolge. Bei Verwendung eines CSS-Selektors oder in diesem Fall einer Medienabfrage überschreibt jede neue Medienabfrage, die der CSS-Datei hinzugefügt wird, die vorherige.
Der Standardcode für Medienabfragen, den wir oben haben, zielt auf Smartphones ab (450 Pixel breit und darunter). Wenn Sie also einen anderen Hintergrund für Tablets festlegen möchten, können Sie Ihrer bereits vorhandenen CSS-Datei einfach den folgenden Code hinzufügen.
Beispiel für eine Tablet Media-Abfrage
/* 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 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.
Tablet Media-Abfrage mit Bereichsbeispiel
/* design for tablets */
@media(max-width: 800px) and (min-width:451){
body{
background-color: red;
}
}
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 einer Breite abzielt.
Medienabfragen verknüpfen
Wenn Sie keine Medienabfragen in Ihren CSS-Code einbetten möchten, gibt es eine alternative Methode, die Sie verwenden können. Bei dieser Methode werden Medienabfragen im <link> -Tag einer HTML-Datei verwendet. Statt eines massiven Stylesheets mit den Stileinstellungen für Smartphones, Tablets und Computer können Sie drei separate CSS-Dateien verwenden und Ihre Medienabfragen in erstellen das <link> -Tag.
Das <link> -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.
Verwenden von Medienabfragen im Link-Tag Beispiel
<!-- main stylesheet -->
<link rel="stylesheet" href="main.css">
<!-- tablet stylesheet -->
<link rel="stylesheet" media="(max-width:800px) and (min-width:451px)"
href="tablet.css">
<!-- smartphone stylesheet -->
<link rel="stylesheet" media="(max-width:450px)" href="smartphone.css">
Der obige Code sollte im <head> -Tag Ihrer HTML-Datei platziert werden. Jetzt müssen Sie nur noch drei separate CSS-Dateien mit den Dateinamen main.css, tablet.css und Smartphone.css erstellen und dann das spezifische Design erstellen, das Sie für jedes Gerät wünschen.
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 Pixel und 801 Pixel und der Stil in der Smartphone-Datei gilt für alle folgenden Bildschirme 451px.
Jetzt haben Sie die Werkzeuge, um reaktionsschnelle Designs zu erstellen
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 : Negative Space / Pexels