Media Queries
Media Queries
Media Queries
Media Queries
Teilen

Media Queries sind ein wichtiger Bestandteil des Responsive Webdesigns und ermöglichen es, das Layout und die Darstellung einer Website je nach Bildschirmgröße und Gerät des Nutzers anzupassen. Mithilfe von Media Queries können spezifische CSS-Regeln basierend auf bestimmten Eigenschaften des Ausgabegeräts definiert werden, wie zum Beispiel Bildschirmbreite, Auflösung oder Ausrichtung.

Eine Media Query besteht aus einem Medientyp, der definiert, auf welchem Gerät oder Medium die CSS-Regeln angewendet werden sollen (z.B. Screen für Computerbildschirme oder Print für Druckausgaben), sowie aus einer oder mehreren Bedingungen, die bestimmen, wann die CSS-Regeln angewendet werden sollen (z.B. min-width für Bildschirmbreiten ab einer bestimmten Größe).

Ein Beispiel für eine Media Query, die eine Schriftgröße für Bildschirme mit einer Breite von mindestens 768 Pixeln definiert, könnte wie folgt aussehen:

@media screen and (min-width: 768px) {
body {
font-size: 16px;
}
}

Durch die Verwendung von Media Queries können Webdesigner sicherstellen, dass eine Website auf allen Geräten und Bildschirmgrößen gut aussieht und optimal dargestellt wird. Dies ist insbesondere wichtig in Zeiten, in denen immer mehr Nutzer mobile Geräte zum Surfen im Internet verwenden.

Picture of WebsiteWerk - Internetdienstleistungen

WebsiteWerk - Internetdienstleistungen

Kristian Snaczke ist Inhaber von WebsiteWerk und Ihr Ansprechpartner, wenn es um die Erstellung, Sicherheit, Optimierung und Pflege von Internetseiten geht.

Picture of WebsiteWerk - Internetdienstleistungen

WebsiteWerk - Internetdienstleistungen

Kristian Snaczke ist Inhaber & Ansprechpartner von WebsiteWerk.

Haben Sie einen Fehler gefunden?
Informationen zur Verarbeitung Ihrer personenbezogenen Daten finden Sie in unserer Datenschutzerklärung.