Media Queries Definition

Was ist Media Queries?

Media-Queries sind eine Funktion von CSS, die es Webseiteninhalten ermöglicht, sich an verschiedene Bildschirmgrößen und Auflösungen anzupassen. Sie sind ein grundlegender Bestandteil des responsiven Webdesigns und werden verwendet, um das Erscheinungsbild von Webseiten für verschiedene Geräte anzupassen.

Medienabfragen können in das HTML einer Webseite eingefügt oder in eine separate .CSS Datei aufgenommen werden, auf die die Webseite verweist. Nachstehend ein Beispiel für eine einfache Medienabfrage:

@media screen and (max-width: 768px)
{
  header { height: 70px; }
  article { font-size: 14px; }
  img { max-width: 480px; }
}

 

Die obige Medienabfrage wird aktiviert, wenn das Browser-Fenster des Benutzers 768 Pixel oder weniger breit ist. Dies könnte der Fall sein, wenn Sie Ihr Fenster auf einem Desktop-Computer verkleinern oder wenn Sie ein mobiles Gerät, wie z. B. ein Tablet, verwenden, um die Webseite zu betrachten.

Im responsiven Webdesign fungieren Media Queries als Filter für unterschiedliche Bildschirmgrößen. Wie bei allen Modulen innerhalb eines Cascading Style Sheets überschreiben die weiter unten in der Liste erscheinenden Module die darüber liegenden. Daher werden die Standardstile in der Regel zuerst in einem CSS-Dokument definiert, gefolgt von den Medienabfragen für verschiedene Bildschirmgrößen. Beispielsweise können die Desktop-Stile zuerst definiert werden, gefolgt von einer Medienabfrage mit Stilen für Tablet-Benutzer, gefolgt von einer Medienabfrage für Smartphone-Benutzer. Stile können auch in der umgekehrten Reihenfolge definiert werden, was als „mobile first“-Entwicklung gilt.

Während min-width bei weitem das am häufigsten in Media Queries verwendete Merkmal ist, gibt es auch viele andere. Beispiele sind min-device-width, min-device-height, aspect-ratio, max-color-index, max-resolution, orientation und resolution. Der Wert für die Auflösung kann zum Beispiel verwendet werden, um HiDPI-Displays (wie Retina-Displays) zu erkennen und hochauflösende Grafiken anstelle von Standardbildern zu laden.

Die Definition von Media Queries auf dieser Seite ist eine Originaldefinition von SharTec.eu.
Das Ziel von SharTec ist es, Computerterminologie so zu erklären, dass sie leicht zu verstehen ist. Wir bemühen uns bei jeder von uns veröffentlichten Definition um Einfachheit und Genauigkeit. Wenn Sie Feedback zur Medienabfragen-Definition haben oder einen neuen Fachbegriff vorschlagen möchten, kontaktieren Sie uns bitte.