Um responsives Webdesign zu implementieren, ist es wichtig, Medienabfragen in CSS zu verstehen, insbesondere nur für Medien und Abfragen mit Medienbildschirm.

Beginnen wir mit der offensichtlichen Frage.

Was ist eine Medienabfrage?

Eine Medienabfrage ist eine Technik, die in CSS3 eingeführt wurde. Die Abfrage beinhaltet die Verwendung der @media-Regel, um einen Block von CSS-Eigenschaften auszuführen, falls eine vorbestimmte Bedingung erfüllt ist.

Der folgende Code schreibt beispielsweise vor, dass die Hintergrundfarbe hellgrün ist, wenn das Browserfenster 400 Pixel oder weniger groß ist:

@media only screen and (max-width: 400px) {
body {
Background-color: lightgreen;
}
}

Medienabfragen sind besonders hilfreich beim Hinzufügen von Haltepunkten für responsives Design. Da Haltepunkte im Wesentlichen Pixelzahlen sind, an denen Inhalt oder Design für die Nutzer anders erscheint, werden Medienabfragen verwendet, um zu definieren, welche Änderungen an welchen Pixeln auftreten müssen.

Im folgenden Beispiel weist der Code an, dass jede Spaltenbreite 100% betragen sollte, wenn das Browserfenster unter 600 Pixel reduziert wird:

/* Für den Desktop: */
.col-1 {Breite: 8.33%;}
.col-2 {Breite: 16,66%;}
.col-3 {Breite: 25%;}
.col-4 {Breite: 33.33%;}
.col-5 {Breite: 41.66%;}
.col-6 {Breite: 50%;}
.col-7 {Breite: 58.33%;}
.col-8 {Breite: 66.66%;}
.col-9 {Breite: 75%;}
.col-10 {Breite: 83.33%;}
.col-11 {Breite: 91,66%;}
.col-12 {width: 100%;}

@media nur Bildschirm und (max-width: 600px) {
/* Für Mobiltelefone: */
{
Breite: 100%;
}
}

Jede Medienabfrage besteht aus einem optionalen Medientyp und einem oder mehreren Medien-Feature-Ausdrücken. Es ist möglich, mehrere Medienabfragen mit logischen Operatoren zu kombinieren. Bei allen Medienabfragen wird zwischen Groß- und Kleinschreibung unterschieden.

Jede Medienabfrage gilt als wahr, wenn der angegebene Medientyp mit den Geräten übereinstimmt, auf denen die Website angezeigt wird. Darüber hinaus müssen die Ausdrücke der Medienfunktionen auch wahr sein.

Was ist die Media-Screen-Abfrage?

Die @media Screen-Abfrage bedeutet einfach, dass die betreffende Abfrage für die Farbbildschirme oder Geräte gedacht ist, die einen „Bildschirm“ -Modus unterstützen.

Nehmen wir ein Beispiel:

@media screen and (max-width:500px)

Die obige Abfrage gilt für Bildschirme mit einer maximalen Breite von 500 Pixel. Dies dient hauptsächlich dazu, den Code so zu steuern, dass er zwischen ‚Bildschirm‘ und anderen Medientypen (wie Druck, Braille, Geprägt, Handheld usw.) unterscheidet.).

Was ist die reine Medienabfrage?

Durch Hinzufügen des logischen Operators ‚only‘ zur Medienabfrage stellt der Entwickler sicher, dass die Abfrage nur angewendet wird, wenn die gesamte Bedingung übereinstimmt. Wenn Sie only nicht verwenden, lesen oder interpretieren ältere Browser möglicherweise nicht alle Ausdrücke der Medienfunktionen. Wenn die Abfrage beispielsweise

@media screen und (max-width:500px)

Ältere Browser interpretieren die Abfrage möglicherweise nur als Bildschirm und ignorieren die Pixelanzahl. Dies würde zur Anwendung der Abfragebedingung auf allen Bildschirmen führen. Um dies zu verhindern, können Sie Folgendes verwenden:

@media only screen und (max-width:500px)

Wenn Sie den einzigen Operator verwenden, geben Sie unbedingt den Medientyp an.

Bedeutung im Responsive Design

Media Queries sind entscheidend für die Implementierung von responsivem Webdesign. Die oben diskutierten Abfragen gehören zu den am häufigsten verwendeten und sind hilfreich, um sicherzustellen, dass Ihre Website-Inhalte für Gerätegrößen und -typen optimiert sind.

Sobald Sie CSS-Abfragen auf Ihrer Website verwendet haben, überprüfen Sie deren Wirksamkeit. Der einfachste Weg, dies zu tun, ist die Verwendung eines Tools, mit dem Sie Ihr Website-Design auf realen Geräten und Browsern testen können. Es gibt mehrere Tools, um dies zu erleichtern, aber nehmen Sie sich Zeit, um online einen responsiven Checker zu finden, mit dem Sie auf einer Vielzahl von Geräten testen können — sowohl auf dem Desktop als auch auf Mobilgeräten.