Wie behebt man eine nicht funktionierende Media Query in WordPress?

Eine der Komponenten des responsiven Webdesigns ist CSS Media Query. WordPress-Entwickler verwenden die Media Query-Technik, um sicherzustellen, dass eine Website auf allen Geräten und Bildschirmgrößen optimal funktioniert. Wenn es ein Problem mit der Funktion dieser CSS-Technik gibt, kann dies zu der Fehlermeldung "Media Query funktioniert nicht in WordPress" führen.

Die Behebung des Fehlers "Media Query not working in WordPress" ist wichtig, um sicherzustellen, dass Ihre Website für alle zugänglich ist, unabhängig von Bildschirmtyp und -größe. Im Folgenden finden Sie einige Tipps zur Behebung des Fehlers "Media Query not working in WordPress". Zuvor jedoch eine kurze Erläuterung der CSS-Medienabfragen.

Was sind CSS Media Queries?

Als eine der Funktionen von CSS (Cascading Style Sheets) ermöglichen Media Queries den Entwicklern die Anwendung verschiedener CSS-Regelsätze auf der Grundlage bestimmter Bedingungen. Sie helfen ihnen, verschiedene Design-Layouts zu erstellen, die auf dem Gerätetyp oder der Größe des Browser-Viewports basieren. Media Query wird in einer einzelnen CSS-Datei verwendet, oder Sie können sie in den HTML-Code einer Webseite einfügen.

Es handelt sich um einen vom W3C empfohlenen Standard für responsives Webdesign. Außerdem stellt er sicher, dass der wiedergegebene Inhalt an unterschiedliche Bedingungen wie Bildschirmauflösungen, Browserbreite und Gerätetyp angepasst werden kann.

Verwendung von CSS Media Queries

Die Sicherstellung eines verbesserten Nutzererlebnisses beim Durchsuchen einer Website ist einer der Faktoren für die Verbesserung des Rankings einer Website in den Suchergebnissen, und genau hier kann CSS Media Query helfen.

Medienabfragen helfen dabei, das Erscheinungsbild von Webseiten für alle Geräte, Bildschirmgrößen und Auflösungen anzupassen. Sie enthalten spezifische Anweisungen, die dem Browser mitteilen, wie Webseiten bei der Anzeige auf Mobil-, Desktop- oder anderen Geräten dargestellt werden sollen.

Durch die Verwendung der CSS-Medienabfrage können Entwickler Websites erstellen, die auf allen Geräten zugänglich und lesbar sind, ohne eine separate mobile Website erstellen zu müssen.

Verwandt: Unterschied zwischen einer mobilen Website und einer responsiven Website

Hier ist ein Beispiel für eine Medienabfrage:

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

{

header { height: 70px; }

article { font-size: 14px; }

img { max-width: 480px; }

}

Medienabfragen werden verwendet für:

• Anwendung von bedingten Stilen mit den CSS @media und @import at-Regeln.

• Verschieben einer Seitenleiste unter den Inhalt der Website, wenn eine Seite im Hochformat auf einem mobilen Gerät angezeigt wird.

• Targeting specific media <style>, <source>, and other HTML elements with the media= attribute.

• Anpassung der Spaltenbreite an die Bildschirmgröße des Geräts.

• Änderung des Layouts auf mobilen Geräten von einem zweispaltigen Layout zu einem einspaltigen.

Syntax der Medienabfragen

Eine Medienabfrage besteht aus den folgenden vier Elementen. Wenn Sie die Syntax verstehen, können Sie Medienabfragen richtig verwenden.

@media-Regel

Mit diesem Element können Sie die Absicht erklären (angeben), eine Medienabfrage in CSS einzurichten. Geben Sie @media ohne Leerzeichen dazwischen ein.

Medienart 

Der Medientyp bezieht sich auf die Art des Geräts, für das die Medienabfrage verwendet wird. Er umfasst die folgenden Regeln:

• Alle: Geeignet für alle Geräte, und in Fällen, in denen der Medientyp nicht angegeben ist, wird "alle" verwendet. 
• Sprachausgabe: Dieser Medientyp wird für Bildschirmlesegeräte verwendet (oder ist für diese bestimmt).
• Drucken: Wenn sich ein Seitenmaterial oder Dokument im Druckvorschau-Modus befindet, wird der Medientyp "Drucken" verwendet. Dieser Medientyp wird für Drucker verwendet.
• Bildschirm: Diese CSS-Regel gilt für Bildschirme - Smartphones, Desktops, Tablets und mehr. 

Merkmale der Medien 

Das Element media features wird verwendet, um spezifische Details hinzuzufügen. Alle Ausdrücke für Medienmerkmale werden in Klammern gesetzt, z. B. eine maximale Breite von 400 Pixel (mobile Geräte). Hier wird das Medienmerkmal max-width für mobile Geräte verwendet.

Andere Medienmerkmale und ihre Funktionen sind wie folgt:

• Breite: Dies bezieht sich auf die Breite des Ansichtsfensters.
• Max-width: Legt die "maximale Breite" des Browserfensters fest.
• Höhe: Dies bezieht sich auf die Höhe des Ansichtsfensters.
• Max-Höhe: Legt die "maximale Höhe" des Browserfensters fest.
• Min-Höhe: Legt die "Mindesthöhe" des Browserfensters fest.
• Ausrichtung: Dies bezieht sich auf die Ausrichtung des Ansichtsfensters. (Quer- oder Hochformat).

Logische Operatoren

Die logischen Operatoren helfen beim Zusammenstellen komplexer Medienabfragen und umfassen die Elemente not, and und only. Man kann auch Kommas verwenden, um eine oder mehrere Medienabfragen in einer einzigen Regel zu kombinieren.

• Nicht: Wenn Sie den "Nicht-Operator" verwenden, müssen Sie einen Medientyp angeben. Normalerweise negiert der 'not-Operator' eine Medienabfrage.

• Und: Um zwei oder mehr Medienmerkmale in einer einzigen Medienabfrage zu kombinieren, verwenden Sie den Operator "und". Dieser Operator kann auch helfen, Medientypen mit Medienmerkmalen zu verbinden.

• Nur: Der "Only-Operator" ist für ältere Browser unerlässlich. Er hilft älteren Browsern, die Medienabfrage korrekt zu interpretieren, und verhindert so Probleme wie den Fehler "Medienabfrage funktioniert nicht in WordPress". Geben Sie auch den Medientyp an, wenn Sie den "not-Operator" verwenden.

• , (Komma): Dieser Operator wird verwendet, um mehrere Medienabfragen in einer einzigen Regel zu kombinieren. Wenn ein Komma zur Trennung mehrerer Abfragen verwendet wird, wird jede Abfrage separat behandelt. Und wenn die Liste der Abfragen wahr ist, bleibt die gesamte Medienabfrageliste wahr.

Tipps zur Behebung einer nicht funktionierenden Media Query in WordPress

Eine CSS-Medienabfrage kann aus verschiedenen Gründen zu einem Fehler führen. Manchmal funktioniert die Medienabfrage auf einem mobilen Gerät, aber nicht auf einem Desktop. Manchmal funktioniert sie auch nicht auf allen Geräten. Um die Medienabfrage Ihrer Website zu überprüfen, verwenden Sie die Entwicklertools des Browsers und untersuchen Sie das CSS Ihrer Website. Klicken Sie auf die Registerkarte "Stile", um zu sehen, welcher Stil auf das betreffende Element (die Syntax) angewendet wird.

Meistens ist der Grund für die "Medienabfrage funktioniert nicht in WordPress" ziemlich häufig. Als solche, hier sind ein paar Möglichkeiten, diesen Fehler zu beheben.

Prüfung auf Inline-CSS-Deklaration

Wenn Sie das CSS innerhalb des HTML-Dokuments deklariert haben, kann dies den Fehler "media query not working in WordPress" verursachen. Sie können dies beheben, indem Sie das "CSS declared inline" aus dem HTML-Dokument entfernen.

Eine andere Möglichkeit ist, diese Erklärung mit !important zu überschreiben. Um zum Beispiel die Textfarbe der Absätze auf mobilen Geräten in "grau" zu ändern, verwenden Sie die folgenden CSS-Zeilen.

@media screen and (max-width: 1024px){

  p{        

        color: gray;

    }

}

Manchmal funktioniert dies jedoch nicht, weil der Inline-Stil auf dasselbe Element angewendet wird. Verwenden Sie in solchen Fällen die Regel !important, um den Inline-Stil außer Kraft zu setzen und das Problem zu beheben.

@media screen and (max-width: 1024px){

  p{        

        color: gray !important;

    }

}

Medienabfragen richtig positionieren

Ein weiterer Grund für den Fehler "media query not working in WordPress" ist die falsche Positionierung von media queries. Um dies zu beheben, fügen Sie die Media Query am Ende des Stylesheets hinzu.

Da Browser das Stylesheet von oben nach unten lesen, können Codes, die am Ende des Stylesheets erwähnt werden, die am Anfang gemachten Deklarationen außer Kraft setzen (außer wenn !important verwendet wird). Außerdem sollten Sie bei kleinen Abfragen die Media-Queries vor dem großen Bildschirm platzieren.

Sehen Sie sich dieses Beispiel an

body {

background-color: black;

}

@media screen and (min-width: 480px) {

body {

background-color: blue;

}

}

@media screen and (min-width: 850px) {

body {

background-color: light blue;

text-align: center;

}

}

• Bei der ersten Regel ist die Hintergrundfarbe "schwarz", wenn der Bildschirm kleiner als 480 Pixel ist.
• In der zweiten Medienabfrage ist die Hintergrundfarbe "blau", wenn der Bildschirm zwischen 480 und 849 Pixel groß ist.
• Wenn der Bildschirm 580 Pixel oder mehr groß ist, wird die Hintergrundfarbe "hellblau" sein und die Ausrichtung mittig erfolgen.

Desktop vs. Mobile

Sobald Sie eine Medienabfrage festgelegt haben, sollte sie sowohl auf dem Desktop als auch auf dem Handy optimal funktionieren. Wenn jedoch auf einem der beiden Geräte ein Fehler auftritt, sollten Sie die folgenden Tipps befolgen, um das Problem zu lösen.

Medienabfrage funktioniert nicht auf dem Desktop

Wenn Sie die Medienfunktion "max-device-width" anstelle von "max-width" verwendet haben, kann dies dazu führen, dass die Medienabfrage bei einem Desktop-Fehler nicht funktioniert. Hier bezieht sich "max-width" auf die Größe des Anzeigebereichs des Geräts, während sich "max-device-width" auf die Bildschirmgröße eines Geräts (mobil) bezieht.

Um den Fehler "Medienabfrage funktioniert nicht auf dem Desktop" zu beheben, ändern Sie die Medienfunktion in "max-width". Dies gibt den Anzeigebereich des Browsers an, nicht die tatsächliche Bildschirmgröße des Geräts.

Medienabfrage funktioniert nicht auf mobilen Geräten

Likewise, if you have not set the viewport and default zoom, it could lead to the issue of media queries not working on mobile devices. To fix this, simply add the following code to your site’s header. Ensure that these lines of code are added within the <head> </head> element.

<meta name="viewport" content="width=device-width, initial-scale=1"/>

Hier ist die "Breite" die Größe des Ansichtsfensters, die auf Gerätebreite eingestellt ist. Sie weist den Browser an, die Website so zu rendern, dass sie natürlich auf den Bildschirm passt. Der Wert "initial-scale" bestimmt die Zoomstufe.

Lesen Sie: Wie man CSS @import vermeidet, um die Ladegeschwindigkeit der Seite zu verbessern

Schlussfolgerung

Es ist wichtig, dass Ihre Website für alle zugänglich ist, unabhängig vom Gerätetyp. Ein responsives Website-Design kann Ihnen helfen, Besucher aus verschiedenen Quellen zu generieren. Mit Googles Mobile-First-Indexierung könnte es auch zu einer schnelleren Indizierung von Webseiten führen. Außerdem bietet es den Nutzern, die Ihre Website auf mobilen Geräten besuchen, ein besseres Erlebnis, was das Ranking Ihrer Website verbessern könnte.

Die Behebung des Fehlers "Medienabfrage funktioniert nicht in WordPress" ist einfach, sobald Sie die Ursache erkannt haben. Sie können die erforderlichen Änderungen vornehmen, indem Sie die oben genannten Tipps befolgen.

Um zu vermeiden, dass der Fehler "media query not working in WordPress" erneut auftritt, verwenden Sie Plugins wie Simple Custom CSS und WP Add Custom CSS, um eine Media Query zu Ihrer Website hinzuzufügen.

Wenn Sie den Fehler "Medienabfrage funktioniert nicht in WordPress" nicht beheben können, wenden Sie sich an uns. Wir sind eine WordPress-Agentur, die Unternehmen hilft, häufige WordPress-Fehler auf ihrer Website zu beheben, ohne Ausfallzeiten zu verursachen.