Kontakt und Projektanfragen: Corporate Designs, Grafikdesigns und moderne Contao Websites – Kay Eickhoff visuelle Kommunikation. — Ansprechpartner und Direktkontakt: Kay Eickhoff.

Von Kay Eickhoff

Was sind Media Queries?

Dynamische Anpassung von Webdesigns für unterschiedliche Geräte und Bildschirmgrößen.

Media Queries sind ein Teil des CSS3-Standards, mit der Entwickler das Layout einer Webseite basierend auf den Eigenschaften des Ausgabegeräts, wie Bildschirmgröße, Auflösung, Farbfähigkeit und Orientierung, anpassen können. Sie ermöglichen es, das Erscheinungsbild einer Webseite oder Anwendung dynamisch zu ändern, abhängig von den Merkmalen des Geräts, auf dem sie angezeigt wird.

Media Queries werden genutzt, um responsive Designs zu erstellen. Das bedeutet, dass eine Webseite auf verschiedenen Geräten und Bildschirmgrößen optimal dargestellt wird, indem das Layout, die Schriftgrößen, Bilder und andere Designelemente entsprechend angepasst werden. Auf diese Weise können Entwickler sicherstellen, dass ihre Inhalte auf Smartphones, Tablets, Desktop-Computern und anderen Geräten gleichermaßen gut lesbar und benutzerfreundlich sind.

Vorteile von Media Queries:

Bessere Benutzererfahrung: Durch die Anpassung des Layouts an verschiedene Bildschirmgrößen wird eine bessere Benutzererfahrung (UX) gewährleistet, da die Inhalte gut lesbar und navigierbar bleiben.
Breitere Zielgruppe: Responsive Designs ermöglichen es, eine breitere Zielgruppe anzusprechen, da die Webseite auf verschiedenen Geräten funktioniert und gut aussieht.
Zukunftssicherheit: Da Media Queries auf den Eigenschaften des Ausgabegeräts basieren, sind sie zukunftssicher und können sich automatisch an neue Technologien und Geräte anpassen.
Suchmaschinenoptimierung (SEO): Responsives Design kann sich positiv auf die SEO auswirken, da Suchmaschinen wie Google mobile-freundliche Webseiten bevorzugen und diese in den Suchergebnissen bevorzugen können.

Beispiele für die Verwendung von Media Queries:

Anordnung: Ändern der Spaltenanzahl oder Anordnung von Elementen auf kleinen Bildschirmen, um Platz zu sparen und die Lesbarkeit zu verbessern.
Schrift: Anpassen der Schriftgröße und Schriftart für verschiedene Bildschirmgrößen, um sicherzustellen, dass der Text gut lesbar bleibt.
Navigation: Ausblenden oder Umgestalten von Navigationselementen für mobile Geräte, um die Benutzererfahrung zu verbessern.
Bildgröße, Bildauflösung: Anpassen der Bildgröße und Bildauflösung für unterschiedliche Geräte, um Ladezeiten zu optimieren und Bandbreite zu sparen.

1) Struktur von Media Queries in CSS:

@media screen and (Bedingung) {
	/* CSS-Regeln, die nur gelten, wenn die Bedingung erfüllt ist */
}

2) Unterschiedliche Arten von Media Queries:

Diese Beispiele zeigen einige der häufig verwendeten Arten von Media Queries in CSS. Durch die Kombination dieser Abfragen können Entwickler sehr präzise Anpassungen basierend auf den Eigenschaften des Ausgabegeräts vornehmen.

/* Bildschirmbreite und -höhe: */ 
@media screen and (max-width: 768px) {
	/* CSS-Regeln, die für Bildschirme mit einer maximalen Breite von 768px gelten */
}


/* Orientierung (Landscape oder Portrait): */
@media screen and (orientation: portrait) {
	/* CSS-Regeln, die für Bildschirme im Hochformat gelten */
}

@media screen and (orientation: landscape) {
	/* CSS-Regeln, die für Bildschirme im Querformat gelten */
}

/* Auflösung: */
@media screen and (min-resolution: 300dpi) {
	/* CSS-Regeln, die für Bildschirme mit einer Mindestauflösung von 300 dpi gelten */
}

/* Gerätetyp (z. B. Drucker): */
@media print {
	/* CSS-Regeln, die für Druckausgaben gelten */
}

/* Abfrage von Umgebungsbeleuchtung (z. B. Dark Mode): */
@media (prefers-color-scheme: dark) {
	/* CSS-Regeln, die für Geräte im Dunkelmodus gelten */
}

3) Medientypen für Stylesheets:

Der Medientyp eines Stylesheets bestimmt, für welche Art von Endgerät es geeignet ist. Wenn beispielsweise ein Stylesheet mit dem Medientyp „handheld“ (tragbare Geräte wie zum Beispiel. Smartphones, Tablets, tragbare Spielekonsolen) erstellt wird, wird es nur angewendet, wenn die Seite auf einem Handheld-Gerät aufgerufen wird. Wenn die Seite jedoch über einen Browser aufgerufen wird, wird es automatisch ignoriert.

Medientypen für verschiedene Endgeräte:

all: gilt für sämtliche genannten Medientypen.
aural: für computergesteuerte Sprachausgaben.
braille: für Ausgabegeräte mit einer Braille-Zeile für blinde Nutzer.
embossed: für Braille-Drucker.
handheld: Für Handheld-PCs und Smartphones. Das iPhone ist beispielsweise eine Ausnahme, da es die Stylesheets vom Typ screen anfordert.
print: gilt für die Druckausgabe der Webseite.
projection: gilt für die Darstellung mit Beamern und ähnlichen Geräten.
screen: gilt für die Bildschirmausgabe und ist der Standard für Webseiten.
tty: gilt für nicht-grafische Ausgabemedien mit fester Zeichenbreite.
tv: gilt für TV-ähnliche Ausgabemedien mit grober Auflösung.

Beispiel für die Verwendung von Media Queries, um eine Navigation von einer horizontalen zu einer vertikalen Liste umzuschalten, wenn der Bildschirm kleiner wird:

In diesem Beispiel wird die Navigation in einer horizontalen Liste angezeigt. Wenn jedoch der Bildschirm kleiner als 768px ist, wird die Navigation mittels Media Query von horizontal zu vertikal umgeschaltet, um Platz zu sparen und die Benutzererfahrung auf kleineren Bildschirmen zu verbessern.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navigation</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <ul class="navigation">
            <li><a href="#">Startseite</a></li>
            <li><a href="#">Über uns</a></li>
            <li><a href="#">Leistungen</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
</body>
</html>

HTML-Struktur

/* Allgemeine Stilregeln für die Navigation */
.navigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navigation li {
    display: inline-block;
    margin-right: 20px;
}

.navigation li a {
    text-decoration: none;
    color: #333;
}

CSS

/* Media Query für Bildschirme mit einer maximalen Breite von 768px */
@media screen and (max-width: 768px) {
    .navigation {
        text-align: center; /* Zentriert die Navigation */
    }

    .navigation li {
        display: block; /* Ändert das Anzeigelayout von horizontal zu vertikal */
        margin: 10px 0; /* Fügt Abstand zwischen den Listenelementen hinzu */
    }
}

Media Query

So siehts aus!

Beispiel: Navigation mit Media Query

Fazit: Websites für unterschiedliche Geräte und Bildschirmgrößen gestalten!

Media Queries ermöglichen eine flexible und effektive Anpassung von Webdesigns an unterschiedliche Bildschirmgrößen und Geräte. Durch die gezielte Nutzung dieser Funktion können Entwickler sicherstellen, dass ihre Webseiten auf Smartphones, Tablets und Desktop-Computern gleichermaßen gut funktionieren und eine optimale Benutzererfahrung bieten. Die Fähigkeit, sich dynamisch an verschiedene Ausgabegeräte anzupassen, machen Media Queries zu einem wichtigen Werkzeug für die moderne Webentwicklung. Durch die Implementierung responsiver Designs können Entwickler sicherstellen, dass ihre Inhalte für eine breite Palette von Benutzern zugänglich sind und dass ihre Webseiten auch in Zukunft relevant und nutzerfreundlich bleiben.