{"id":31521,"date":"2024-11-12T12:39:38","date_gmt":"2024-11-12T12:39:38","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31521"},"modified":"2025-03-18T13:50:52","modified_gmt":"2025-03-18T13:50:52","slug":"Media_Queries","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/de\/wiki\/Media_Queries","title":{"rendered":"Media Queries"},"content":{"rendered":"

Definition<\/span><\/h2>\n

Media Queries (auf Deutsch: „Medienabfragen“) sind eine CSS3 Funktion, die es erm\u00f6glicht, die Darstellung eines Dokuments f\u00fcr verschiedene Ausgabemedien festlegen. Die Darstellung wird dabei anhand bestimmter Bedingungen wie dem Medientyp, der Ausrichtung des Displays oder der Bildschirmaufl\u00f6sung angepasst. Media Queries sind seit Juni 2012 ein vom World Wide Web Consortium (W3C) empfohlener Standard f\u00fcr das Responsive Webdesign<\/a>.\n<\/p>\n

Wof\u00fcr werden Media Queries verwendet?<\/span><\/h2>\n

Ein wichtiger Bestandteil des Responsive Designs ist die Schaffung der richtigen Nutzererfahrung f\u00fcr das richtige Ger\u00e4t. Die Medienabfragefunktion bietet die M\u00f6glichkeit, dem Client-Browser, basierend auf inh\u00e4renten Eigenschaften des Ger\u00e4tes, auf dem er ausgef\u00fchrt wird, mit einer angepassten Darstellung zu antworten. Bevor eine Webseite vom Browser geladen und angezeigt wird, werden die Medieninformationen mit den Media Queries abgefragt. Der Vorteil der CSS Medienabfragen ist, dass nicht f\u00fcr jedes einzelne Ger\u00e4t die passende Aufl\u00f6sung und Bildschirmgr\u00f6\u00dfe angegeben werden muss. CSS Medienabfragen bieten somit eine einfache M\u00f6glichkeit, Webseiten auf mehr als eine Art von Ausgabeger\u00e4t auszurichten und sind daher ein wichtiger Bestandteil der mobilen Optimierung<\/a> und des Responsive Webdesigns<\/a>.\n<\/p>\n

Funktionsweise<\/span><\/h2>\n
\n
\"Media<\/a> <\/p>\n
Abbildung:<\/b> Media Queries – Autor: Seobility – Lizenz: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

CSS Media Queries bestehen aus einem (optionalen) Media Type (Medientyp) und k\u00f6nnen einen oder mehrere als Media Features (Medienmerkmale) bezeichnete Ausdr\u00fccke enthalten. Mehrere Abfragen k\u00f6nnen durch logische Operatoren kombiniert werden. Media Queries werden mit „@media“ eingeleitet und verwendet, um einer Seite nur dann einen Block von CSS-Eigenschaften zuzuweisen, wenn die nachfolgenden Bedingungen erf\u00fcllt sind. Mit Media Queries werden der Medientyp (Smartphone, Tablet, Drucker, TV) und Medienmerkmale wie Ausrichtung des Bildschirms, Aufl\u00f6sung, H\u00f6he, Breite oder Farben abgefragt und als Ergebnis auch sogenannte Breakpoints gesetzt.\n<\/p>\n

Abfrage der Medientypen mit Media Queries<\/span><\/h3>\n

Anhand der Medientypen werden die CSS Anweisungen f\u00fcr bestimmte Ausgabeger\u00e4te definiert. Die Abfrage des Medientyps mit Media Queries ist jedoch optional. Wird der Medientyp in den Media Queries nicht definiert, gilt automatisch der Default- oder Standardwert „all“. Die gebr\u00e4uchlichsten Abfragen f\u00fcr Medientypen sind „screen“ f\u00fcr Bildschirme, Tablets und Smartphones, „print“ f\u00fcr die Steuerung der Druckausgabe einer Website und „speech“ f\u00fcr die Ausgabe auf einem Screenreader, der die Inhalte vorliest.\n<\/p>\n

Beispielcode f\u00fcr die Abfrage des Medientyps:\n<\/p>\n

@media screen {\r\n\/* Hier stehen die CSS Anweisungen f\u00fcr die Bildschirmausgabe *\/\r\n}<\/pre>\n
Abfrage der Medienmerkmale mit Media Queries<\/span><\/h3>\n
Ein Medienmerkmal ist ein Ausdruck, der eine oder mehrere Anforderungen an ein Ausgabeger\u00e4t stellt, welche erf\u00fcllt sein m\u00fcssen, damit die CSS Anweisungen eingebunden werden. Medienmerkmale sind beispielsweise die Ausrichtung, H\u00f6he, Breite und Aufl\u00f6sung eines Displays. Ein Ausdruck ist wahr, wenn die Anforderung erf\u00fcllt ist, und falsch, wenn dies nicht der Fall ist. Wenn mehrere Medienmerkmale definiert werden, m\u00fcssen alle wahr sein, damit die gesamte Abfrage wahr ist.\n<\/p>\n
Beispielcode f\u00fcr die Abfrage des Medienmerkmals „landscape“ :\n<\/p>\n
@media all and (orientation: landscape) {\r\n\/* Hier stehen die CSS Anweisungen f\u00fcr die Ausgabe im Querformat*\/\r\n}<\/pre>\n
Breakpoints in Media Queries<\/span><\/h3>\n
Im responsiven Layout einer Webseite werden Breakpoints f\u00fcr die korrekte Anzeige bei bestimmten Viewport Gr\u00f6\u00dfen gesetzt. Ein Breakpoint ist eine Bedingung die sich durch Media Queries ergibt, bei deren Erf\u00fcllung sich das Layout einer Webseite f\u00fcr die korrekte Darstellung bei einer bestimmten Anzeigegr\u00f6\u00dfe \u00e4ndert. Es ist empfehlenswert, beim Layout einer responsiven Webseite mit dem Design f\u00fcr die kleinsten Ausgabeger\u00e4te (Smartphones) zu beginnen und anschlie\u00dfend f\u00fcr Tablets, Laptops bis hin zu gro\u00dfen Monitoren mit Breakpoints und CSS Anweisungen anzupassen. Ein Breakpoint und die entsprechenden CSS Anweisungen werden immer dann eingef\u00fcgt, wenn die Darstellung nicht mehr stimmig ist. Die CSS Eigenschaften in den Media Queries \u00fcberschreiben dabei jeweils nur die Eigenschaften, die durch den Breakpoint ge\u00e4ndert werden. Die Definition der Breakpoints in den CSS Media Queries erfolgt durch die Angabe eines Pixelwertes.\n<\/p>\n
Beispielcode f\u00fcr einen Breakpoint bei 720px Breite:\n<\/p>\n
@media screen and (max-width:720px) {\r\n\/* Hier stehen die CSS Anweisungen f\u00fcr die Ausgabe*\/\r\n}<\/pre>\n
Um eine korrekte Anzeige auf jedem Ger\u00e4t zu gew\u00e4hrleisten, muss ein Viewport<\/a> Meta Tag in den Head-Bereich des HTML Quellcodes eingef\u00fcgt werden. Dieser Meta-Tag gibt dem Browser Anweisungen, wie er die Abmessungen und die Skalierung der Seite steuern soll. Die Syntax lautet:\n<\/p>\n
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/pre>\n
Mit „width=device-width“ wird eine Seite angewiesen, die Breite des Bildschirms in ger\u00e4teunabh\u00e4ngigen Pixeln zu nutzen. Die Anweisung „initial-scale=1.0“ gew\u00e4hrleistet eine 1:1-Beziehung zwischen CSS Pixeln und den ger\u00e4teunabh\u00e4ngigen Pixeln.\n<\/p>\n
Weiterf\u00fchrende Links<\/span><\/h2>\n