Wie behebe ich, dass die Medienabfrage in WordPress nicht funktioniert?

Eine der Komponenten des responsiven Webdesigns ist CSS Media Query. WordPress-Entwickler nutzen die Medienabfragetechnik, um sicherzustellen, dass eine Website auf allen Geräten und Bildschirmgrößen optimal funktioniert. Wenn bei der Funktionsweise dieser CSS-Technik ein Problem auftritt, kann dies zur Fehlermeldung „Medienabfrage funktioniert in WordPress nicht“ führen.

Die Behebung des Fehlers „Medienabfrage funktioniert in WordPress nicht“ ist wichtig, um sicherzustellen, dass Ihre Website für alle zugänglich ist, unabhängig von Bildschirmtyp und -größe. Nachfolgend haben wir einige Tipps zur Behebung des Fehlers „Medienabfrage funktioniert in WordPress nicht“ bereitgestellt. Zuvor finden Sie hier jedoch eine kurze Erläuterung der CSS-Medienabfragen.

Was sind CSS-Medienabfragen?

Als eine der Funktionen von CSS (Cascading Style Sheets) ermöglichen Medienabfragen Entwicklern die Anwendung verschiedener CSS-Regelsätze basierend auf festgelegten Bedingungen. Es hilft ihnen, unterschiedliche Designlayouts basierend auf dem Gerätetyp oder der Größe des Browser-Ansichtsfensters zu erstellen. den HTML-Code einer Webseite einfügen .

Es handelt sich um einen vom W3C empfohlenen Standard für responsives Webdesign . Darüber hinaus wird sichergestellt, dass der gerenderte Inhalt an unterschiedliche Bedingungen angepasst werden kann, z. B. Bildschirmauflösungen, Browserbreite und Gerätetyp.

Verwendung von CSS-Medienabfragen

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

Medienabfragen helfen dabei, das Erscheinungsbild von Webseiten auf allen Geräten, Bildschirmgrößen und Auflösungen anzupassen. Es enthält spezifische Anweisungen, die dem Browser mitteilen, wie Webseiten gerendert werden sollen, wenn sie auf Mobilgeräten, Desktops oder anderen Geräten angezeigt werden.

Mithilfe 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.

Verwandte Themen : Unterschied zwischen einer mobilen Website und einer responsiven Website

Hier ist ein Beispiel für eine Medienabfrage:

@media-Bildschirm und (maximale Breite: 480 Pixel)

{

Header {Höhe: 70px; }

Artikel { Schriftgröße: 14px; }

img { max-width: 480px; }

}

Medienabfragen werden verwendet für:

• Anwenden bedingter Stile mit den CSS-At-Regeln @media und @import.

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

• Ausrichtung auf bestimmte Medien <style>, <source>, and other HTML elements with the media= attribute.

• Anpassen der Spaltenbreite basierend auf der Bildschirmgröße des Geräts.

• Ändern des Layouts auf Mobilgeräten von einem zweispaltigen Layout zu einem einspaltigen.

Syntax für Medienabfragen

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

@media-Regel

Dieses Element hilft dabei, die Absicht zum Einrichten einer Medienabfrage in CSS zu deklarieren (anzugeben). Geben Sie @media ohne Leerzeichen dazwischen ein.

Medientyp 

Der Medientyp bezieht sich auf den Gerätetyp, für den die Medienabfrage verwendet wird. Es enthält die folgenden Regeln:

• Alle : Geeignet für alle Geräte. In Fällen, in denen der Medientyp nicht angegeben ist, wird „Alle“ verwendet.
• Sprache : Dieser Medientyp wird für Screenreader verwendet (oder ist für diese gedacht).
• Drucken : Wenn sich ein Seitenmaterial oder ein Dokument im Druckvorschaumodus befindet, wird der Medientyp „Drucken“ angewendet. Dieser Medientyp wird für Drucker verwendet.
• Bildschirm : Diese CSS-Regel gilt für Bildschirme – Smartphones, Desktops, Tablets und mehr.

Medienfunktionen 

Das Element „Medienfunktionen“ wird verwendet, um spezifische Details hinzuzufügen. Alle Medienfunktionsausdrücke werden in Klammern gesetzt, z. B. eine maximale Breite von 400 Pixel (mobile Geräte). Hier wird die Medienfunktion mit maximaler Breite für mobile Geräte verwendet.

Weitere Medienfunktionen und ihre Funktionen sind wie folgt:

• Breite : Dies bezieht sich auf die Breite des Ansichtsfensters.
• Max-width : Definiert die „maximale Breite“ des Browserfensters.
• Höhe : Dies bezieht sich auf die Höhe des Ansichtsfensters.
• Max-height : Definiert die „maximale Höhe“ des Browserfensters.
• Min-Height : Definiert die „Mindesthöhe“ des Browserfensters.
• Ausrichtung : Dies bezieht sich auf die Ausrichtung des Ansichtsfensters. (Querformat- oder Porträtmodus).

Logische Operatoren

Die logischen Operatoren helfen beim Verfassen komplexer Medienabfragen und umfassen die Nicht-, Und- und Nur-Elemente. Sie können Kommas auch verwenden, um eine oder mehrere Medienabfragen in einer einzigen Regel zusammenzufassen.

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

• Und : Um zwei oder mehr Medienfunktionen in einer einzigen Medienabfrage zu kombinieren, verwenden Sie den „and“-Operator. Dieser Operator kann auch dabei helfen, Medientypen mit Medienfunktionen zu verbinden.

• Nur : Der „einzige Operator“ ist für ältere Browser unerlässlich. Es hilft älteren Browsern, die Medienabfrage korrekt zu interpretieren und verhindert so Probleme wie den Fehler „Medienabfrage funktioniert in WordPress nicht“. Geben Sie außerdem den Medientyp an, wenn Sie den „Not“-Operator verwenden.

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

Tipps zur Behebung, dass die Medienabfrage in WordPress nicht funktioniert

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

Meistens ist der Grund dafür, dass die Medienabfrage in WordPress nicht funktioniert, recht häufig. Daher finden Sie hier einige Möglichkeiten, diesen Fehler zu beheben.

Suchen Sie nach einer Inline-CSS-Deklaration

Wenn Sie das CSS im HTML-Dokument deklariert haben, könnte dies den Fehler „Medienabfrage funktioniert in WordPress nicht“ verursachen. Sie können dies beheben, indem Sie „Inline deklariertes CSS“ aus dem HTML-Dokument entfernen.

!important zu überschreiben . Um beispielsweise die Textfarbe der Absätze auf Mobilgeräten in „Grau“ zu ändern, verwenden Sie die folgenden CSS-Zeilen.

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

  P{        

        Farbe: grau;

    }

}

Manchmal funktioniert dies jedoch möglicherweise nicht, weil der Inline-Stil auf dasselbe Element angewendet wird. Verwenden Sie in solchen Fällen die Regel !important, um den Inline-Stil zu überschreiben und das Problem zu beheben.

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

  P{        

        Farbe: grau !wichtig;

    }

}

Medienabfragen richtig positionieren

Ein weiterer Grund für den Fehler „Medienabfrage funktioniert in WordPress nicht“ ist die falsche Positionierung von Medienabfragen. Um dies zu beheben, fügen Sie die Medienabfrage 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 überschreiben (außer wenn !important verwendet wird). Platzieren Sie außerdem bei kleinen Abfragen die Medienabfragen vor dem großen Bildschirm.

Schauen Sie sich dieses Beispiel an

Körper {

Hintergrundfarbe: schwarz;

}

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

Körper {

Hintergrundfarbe: blau;

}

}

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

Körper {

Hintergrundfarbe: hellblau;

Textausrichtung: Mitte;

}

}

• In der ersten Regel ist die Hintergrundfarbe „schwarz“, wenn der Bildschirm weniger als 480 Pixel groß ist.
• In der zweiten Medienabfrage ist die Hintergrundfarbe „blau“, wenn der Bildschirm zwischen 480 und 849 Pixel groß ist.
• Wenn der Bildschirm schließlich 580 Pixel oder mehr hat, ist die Hintergrundfarbe „hellblau“ mit zentrierter Ausrichtung.

Desktop vs. Mobilgerät

Sobald Sie eine Medienabfrage eingerichtet haben, sollte diese sowohl auf dem Desktop als auch auf Mobilgeräten optimal funktionieren. Wenn jedoch bei einem der beiden ein Fehler auftritt, verwenden Sie die folgenden Tipps, um das Problem zu beheben.

Medienabfrage funktioniert nicht auf dem Desktop

Wenn Sie die Medienfunktion „max-device-width“ anstelle von „max-width“ verwendet haben, könnte dies dazu führen, dass die Medienabfrage bei dem 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 auf „maximale Breite“. Dies gibt den Anzeigebereich des Browsers an, nicht die tatsächliche Bildschirmgröße des Geräts.

Medienabfrage funktioniert auf Mobilgeräten nicht

Wenn Sie das Ansichtsfenster und den Standardzoom nicht festgelegt haben, kann es ebenfalls dazu kommen, dass Medienabfragen auf Mobilgeräten nicht funktionieren. Um dies zu beheben, fügen Sie einfach den folgenden Code zum Header Ihrer Website hinzu. Stellen Sie sicher, dass diese Codezeilen innerhalb der hinzugefügt werden<head></head> Element.

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

Hier ist „Breite“ die Größe des Ansichtsfensters, eingestellt auf „Gerätebreite“. Es weist den Browser an, die Website so darzustellen, dass sie natürlich auf den Bildschirm passt. Während der „Anfangsmaßstab“ die Zoomstufe definiert.

Lesen Sie : So vermeiden Sie CSS @import, um die Seitenladegeschwindigkeit zu verbessern

Abschluss

Es ist wichtig, sicherzustellen, dass Ihre Website für alle zugänglich ist, unabhängig vom Gerätetyp. Ein responsives Website-Design kann Ihnen dabei helfen, Traffic aus verschiedenen Quellen zu generieren. Mit der Mobile-First-Indexierung von Google könnte es auch zu einer schnelleren Indexierung von Webseiten kommen. Darüber hinaus bietet es Benutzern, die Ihre Website auf Mobilgeräten durchsuchen, ein verbessertes Erlebnis, was das Ranking Ihrer Website verbessern könnte.

Das Beheben des Fehlers „Medienabfrage funktioniert in WordPress nicht“ ist einfach, sobald Sie den Grund identifiziert haben. Sie können die erforderlichen Änderungen vornehmen, indem Sie die oben genannten Tipps befolgen.

Um zu verhindern, dass der Fehler „Medienabfrage funktioniert in WordPress nicht“ erneut auftritt, verwenden Sie Plugins wie Simple Custom CSS und WP Add Custom CSS, um Ihrer Website eine Medienabfrage hinzuzufügen.

Wenn Sie außerdem den Fehler „Medienabfrage funktioniert in WordPress nicht funktioniert“ nicht beheben können, nehmen Sie Kontakt mit uns auf. Wir sind eine WordPress-Agentur , die Unternehmen dabei hilft, häufige WordPress-Fehler auf ihrer Website zu beheben, ohne dass es zu Ausfallzeiten kommt.