In diesem Beitrag werden die Richtlinien erwähnt, die zur Implementierung von Medienabfragen erforderlich sind.
Wie implementiert man Medienabfragen für mobile Geräte?
Die Medienabfrage kann auf mobile Geräte angewendet werden, indem einfach das „ @Medien ”-Tag und Angabe der Bildschirmgröße in den kleinen Klammern. Das CSS für diese Medienabfrage kann dann innerhalb der geschweiften Klammern hinzugefügt werden. Immer wenn die Bildschirmgröße der vom Benutzer angegebenen Größe entspricht, wird die angegebene Medienabfrage angewendet.
Sehen wir uns ein praktisches Beispiel an, um die Implementierung von Medienabfragen für mobile Geräte zu erlernen.
Beispiel: Erstellen Sie ein Layout, das durch Anwenden von Medienabfragen vom zweispaltigen Layout zum einspaltigen Layout wechselt
Im folgenden Beispiel ändert sich das Layout der Webseite von einem Spaltenlayout zu einem einspaltigen Layout:
Schritt 1: Erstellen Sie eine HTML-Struktur
- Erstellen Sie zunächst eine HTML-Datei und verknüpfen Sie die externe CSS-Stylesheet-Datei darin
Abschnitt. - Erstellen Sie dann eine
Abschnitt und fügen Sie die Überschrift der Website mit hinzu Etikett. - Ein ... kreieren mit dem Klassennamen „container-class“ und zwei weiterendarin hat es den Klassennamen „ Spalte “. < Körper >
< h1 > Linux-Hinweis < / h1 >
< / Kopfzeile>
< div Klasse = „Container-Klasse“ >
< div Klasse = 'Spalte' >
< h2 > Abschnitt Eins < / h2 >
< P > Linux Hint ist eine der besten E-Learning-Plattformen. < / P >
< / div >
< div Klasse = 'Spalte' >
< h2 > Abschnitt Zwei < / h2 >
< P > Linux Hint ist eine der besten E-Learning-Plattformen. < / P >
< / div >
< / div >
< / Körper >Schritt 2: CSS anwenden
Zum Körperteil:- Geben Sie zunächst den Textabschnitt an, indem Sie „ Körper ”-Tag und Erwähnung der geschweiften Klammern.
- Geben Sie innerhalb der geschweiften Klammern die Schriftfamilie, die Hintergrundfarbe, den Rand und den Abstand an.
Auf der
Abschnitt:
- Geben Sie die Textfarbe, die Textausrichtung, die Hintergrundfarbe und den Abstand an.
Auf der „Container-Klasse“ div:
- Stellen Sie „ Anzeige „Immobilienwert zu“ biegen ” um die Flexbox zu erstellen.
- Benutzen Sie die „ Rechtfertigungsinhalt ”, um Platz zwischen dem Inhalt und Polsterung hinzuzufügen.
Zur Spaltenklasse:
- Geben Sie zunächst den angegebenen Wert für „ biegen ”-Eigenschaft, um einen Leerraum zwischen den beiden Layoutabschnitten hinzuzufügen.
- Fügen Sie anschließend die Hintergrundfarbe, den Rand, den Abstand und die Boxgröße hinzu.
Schritt 3: Medienabfrage anwenden
- Um die Medienabfrage für mobile Geräte anzuwenden, fügen Sie zunächst das „ @Medien ' Etikett.
- Geben Sie dann den Wert „ 768px “, was typisch für mobile Geräte ist, bis hin zu „ maximale Breite ”-Eigenschaft innerhalb der kleinen Klammern.
- Geben Sie anschließend „ Spalte ” Wert auf die „ Flex-Richtung „Eigenschaft, die für die“ gilt Container-Klasse“-Klasse. Dadurch werden die beiden Spalten in eine Spalte umgewandelt, sobald die angegebene Bildschirmgröße erkannt wird.
- Wenden Sie abschließend CSS auf „ Spalte ” Klasse und geben Sie an „ Marge ' Und ' biegen ' Werte:
Schriftfamilie: serifenlos;
Hintergrund- Farbe : Silber;
Marge: 0 ;
Polsterung: 0 ;
}
Header {
Hintergrund- Farbe : #2f4f4f;
Polsterung: 20px;
Text- ausrichten : Center;
Farbe : Weiß;
}
.Container- Klasse {
Anzeige: Flex;
rechtfertigen- Inhalt : Leerzeichen dazwischen;
Polsterung: 20px;
}
.Spalte {
biegen: 0 1 kalk ( fünfzig % - 10px ) ;
Grenze : 1 Pixel durchgehend grün;
Hintergrund- Farbe : Weiß;
Boxgröße: border-box;
Polsterung: 20px;
}
@ Medien ( max- Breite : 768px ) {
.Container- Klasse {
Flexrichtung: Spalte;
}
.Spalte {
biegen: 0 1 100 %;
Rand unten: 20px;
}
}Ausgabe
Hier ist die Ausgabe der Webseite nach Anwendung der Medienabfrage. Diese Ausgabe ist ein zweispaltiges responsives Layout:
Immer wenn der Bildschirm mithilfe einer Medienabfrage für Mobilgeräte die angegebenen Abmessungen erreicht, wird er in ein einspaltiges Layout umgewandelt:
Abschluss
Um Medienabfragen für mobile Geräte zu implementieren, fügen Sie zunächst „ Ansichtsfenster ' im ' Kopf ' Abschnitt. Schreiben Sie dann mobiles Design-spezifisches CSS. Fügen Sie anschließend die Medienabfrage hinzu, indem Sie das Tag „@media“ verwenden und die Bildschirmgröße des Mobilgeräts angeben. Geben Sie beispielsweise 768 Pixel für Tablets und 480 Pixel für Mobiltelefone an. In diesem Artikel wurde die Vorgehensweise zur Implementierung von Medienabfragen für mobile Geräte erläutert.