Hoe Media Query oplossen die niet werkt in WordPress?

Een van de componenten van responsive webdesign is CSS Media Query. WordPress-ontwikkelaars gebruiken de mediaquery-techniek om ervoor te zorgen dat een website optimaal functioneert op alle apparaten en schermformaten. Als er een probleem is met de werking van deze CSS-techniek, kan dit resulteren in de foutmelding 'mediaquery werkt niet in WordPress'.

Het oplossen van de foutmelding 'mediaquery werkt niet in WordPress' is essentieel om ervoor te zorgen dat uw website voor iedereen toegankelijk is, ongeacht het schermtype en de schermgrootte. Hieronder hebben we een paar tips gegeven om de foutmelding 'mediaquery werkt niet in WordPress' op te lossen. Maar eerst volgt hier een korte uitleg van CSS-mediaquery's.

Wat zijn CSS-mediaquery's?

Als een van de functies van CSS (Cascading Style Sheets) stellen mediaquery's ontwikkelaars in staat om verschillende sets CSS-regels toe te passen op basis van ingestelde voorwaarden. Het helpt hen bij het maken van gevarieerde ontwerplay-outs op basis van het apparaattype of de grootte van de viewport van de browser. Mediaquery wordt gebruikt in een individuele . CSS-bestand, of u kunt het invoegen in de HTML van een webpagina.

Het is een door W3C aanbevolen standaard voor responsive webdesign. Bovendien zorgt het ervoor dat de weergegeven inhoud kan worden aangepast aan verschillende omstandigheden, zoals schermresoluties, browserbreedte en apparaattype.

Gebruik van CSS-mediaquery's

Ervoor zorgen dat een gebruiker een verbeterde ervaring heeft bij het browsen op een website is een van de factoren voor het verbeteren van de positie van een website in het zoekresultaat, en dit is waar CSS Media Query kan helpen.

Mediaquery's helpen bij het aanpassen van het uiterlijk van webpagina's op alle apparaten, schermformaten en resoluties. Het biedt specifieke instructies die de browser vertellen hoe webpagina's moeten worden weergegeven wanneer ze worden bekeken op mobiel, desktop of andere apparaten.

Door de CSS-mediaquery te gebruiken, kunnen ontwikkelaars websites maken die toegankelijk en leesbaar zijn op alle apparaten zonder dat ze een aparte mobiele website hoeven te maken.

Zie ook: Verschil tussen een mobiele site en een responsieve site

Hier volgt een voorbeeld van een mediaquery:

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

{

header { height: 70px; }

article { font-size: 14px; }

img { max-width: 480px; }

}

Mediaquery's worden gebruikt voor:

• Voorwaardelijke stijlen toepassen met de CSS-@media en @import at-regels.

• Een zijbalk onder de inhoud van de site verplaatsen wanneer een pagina in staande modus wordt bekeken op een mobiel apparaat.

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

• De kolombreedte aanpassen op basis van de schermgrootte van het apparaat.

• Lay-outs op mobiele apparaten wijzigen van een lay-out met twee kolommen naar een lay-out met één kolom.

Syntaxis van mediaquery's

Een mediaquery bestaat uit de volgende vier elementen. Door de syntaxis te begrijpen, kunt u mediaquery's correct gebruiken.

@media regel

Dit element helpt bij het verklaren (specificeren) van de intentie van het opzetten van een mediaquery in CSS. Ga @media binnen zonder spatie ertussen.

Soort media 

Mediatype verwijst naar het type apparaat waarvoor de mediaquery wordt gebruikt. Het bevat de volgende regels:

• Alle: Geschikt voor alle apparaten en in gevallen waarin het mediatype niet is gespecificeerd, wordt 'alle' gebruikt. 
• Spraak: Dit mediatype wordt toegepast op (of is bedoeld voor) schermlezers.
• Afdrukken: Als een paginamateriaal of document zich in de afdrukvoorbeeldmodus bevindt, wordt het mediatype 'afdrukken' toegepast. Dit mediatype wordt gebruikt voor printers.
• Scherm: Deze CSS-regel is van toepassing op schermen - smartphones, desktops, tablets en meer. 

Media-functies 

Het element mediafuncties wordt gebruikt om specifieke details toe te voegen. Alle expressies van mediakenmerken worden tussen haakjes geplaatst, zoals een maximale breedte van 400px (mobiele apparaten). Hier wordt de mediafunctie met maximale breedte gebruikt voor mobiele apparaten.

Andere mediafuncties en hun functies zijn als volgt:

• Breedte: Dit verwijst naar de breedte van de viewport.
• Max-width: Definieert de 'maximum-width' van het browservenster.
• Hoogte: Dit verwijst naar de hoogte van de viewport.
• Max-height: Definieert de 'maximum-height' van het browservenster.
• Min-height: Definieert de 'minimum-height' van het browservenster.
• Oriëntatie: Dit verwijst naar de viewport-oriëntatie. (landschaps- of portretmodus).

Logische operatoren

De logische operatoren helpen bij het samenstellen van complexe mediaquery's en bevatten de elementen niet, en en en. Men kan ook komma's gebruiken om een of meer mediaquery's in één regel te combineren.

• Niet: Als u de operator 'not gebruikt', moet u een mediatype opgeven. Meestal wordt een mediaquery door de 'not-operator' genegeerd.

• En: Als u twee of meer mediaobjecten wilt combineren tot één mediaquery, gebruikt u de operator 'en'. Deze operator kan ook helpen bij het samenvoegen van mediatypen met mediafuncties.

• Alleen: De 'enige operator' is essentieel voor oudere browsers. Het helpt oudere browsers om de mediaquery correct te interpreteren, waardoor problemen zoals de foutmelding 'mediaquery werkt niet in WordPress' worden voorkomen. Geef ook het mediatype op wanneer u de operator 'not gebruikt'.

• , (komma): Deze operator wordt gebruikt om meerdere mediaquery's in één regel te combineren. Wanneer een komma wordt gebruikt om verschillende query's van elkaar te scheiden, wordt elke query afzonderlijk behandeld. En als de lijst met query's waar is, blijft de hele lijst met mediaquery's waar.

Tips om te verhelpen dat Media Query niet werkt in WordPress

Een CSS-mediaquery kan om verschillende redenen tot een fout leiden. Soms werkt de mediaquery op een mobiel apparaat, maar niet op een desktop. Soms werkt het mogelijk niet op alle apparaten. Om de mediaquery van uw site te controleren, gebruikt u de ontwikkelaarstools van de browser en inspecteert u de CSS van uw site. Klik op het tabblad 'Stijlen' om te zien welke stijl is toegepast op het betreffende element (syntaxis).

Meestal is de reden voor de 'mediaquery die niet werkt in WordPress' vrij gebruikelijk. Daarom zijn hier een paar manieren om deze fout op te lossen.

Controleren op inline CSS-declaratie

Als je de CSS in het HTML-document hebt gedeclareerd, kan dit de foutmelding 'mediaquery werkt niet in WordPress' veroorzaken. U kunt dit oplossen door de 'CSS inline gedeclareerd' uit het HTML-document te verwijderen.

Een andere manier is om deze verklaring te overschrijven met !important. Als u bijvoorbeeld de tekstkleur van de alinea's op mobiele apparaten wilt wijzigen in 'grijs', gebruikt u de volgende regels CSS.

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

  p{        

        color: gray;

    }

}

Soms werkt dit echter niet vanwege de inline-stijl die op hetzelfde element is toegepast. Gebruik in dergelijke gevallen de !important-regel om de inline-stijl te overschrijven en het probleem op te lossen.

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

  p{        

        color: gray !important;

    }

}

Mediaquery's correct positioneren

Een andere reden voor de foutmelding 'mediaquery werkt niet in WordPress' is de onjuiste positionering van mediaquery's. U kunt dit oplossen door de mediaquery aan het einde van het opmaakmodel toe te voegen.

Aangezien browsers het stylesheet van boven naar beneden lezen, kunnen codes die aan het einde van het stylesheet worden vermeld, de declaraties die aan het begin zijn gedaan overschrijven (behalve wanneer !important wordt gebruikt). Voor kleine query's plaatst u bovendien de mediaquery's voor het grote scherm.

Bekijk dit voorbeeld

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;

}

}

• In de eerste regel is de achtergrondkleur 'zwart' als het scherm kleiner is dan 480px.
• In de tweede mediaquery is de achtergrondkleur 'blauw' als het scherm tussen 480 en 849px ligt.
• Ten slotte, als het scherm 580px of meer is, is de achtergrondkleur 'lichtblauw' met uitlijning in het midden.

Desktop versus mobiel

Als je eenmaal een mediaquery hebt ingesteld, zou deze optimaal moeten werken op zowel de desktop als mobiel. Als er echter een fout optreedt bij een van de twee, gebruikt u de volgende tips om het probleem op te lossen.

Mediaquery werkt niet op desktop

Als u de mediafunctie 'max-device-width' hebt gebruikt in plaats van 'max-width', kan dit ertoe leiden dat de mediaquery niet werkt op de desktopfout. Hier verwijst 'max-width' naar de grootte van het weergavegebied van het apparaat, terwijl 'max-device-width' verwijst naar de schermgrootte van een apparaat (mobiel).

Om deze fout 'mediaquery werkt niet op desktop' op te lossen, wijzigt u de mediafunctie in 'max-width'. Dit specificeert het weergavegebied van de browser, niet de werkelijke schermgrootte van het apparaat.

Mediaquery werkt niet op mobiele apparaten

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 is de 'width' de grootte van de viewport, ingesteld op device-width. Het instrueert de browser om de website op natuurlijke wijze op het scherm weer te geven. Terwijl de 'initiële schaal' het zoomniveau definieert.

Lezen: Hoe CSS te vermijden @import om de laadsnelheid van pagina's te verbeteren

Conclusie

Het is belangrijk om ervoor te zorgen dat uw website voor iedereen toegankelijk is, ongeacht het type apparaat. Een responsief website-ontwerp kan u helpen verkeer uit verschillende bronnen te genereren. Met Google's mobile-first indexering zou het ook kunnen leiden tot snellere indexering van webpagina's. Bovendien biedt het een verbeterde ervaring voor gebruikers die op mobiele apparaten op uw website surfen, wat de positie van uw site kan verbeteren.

Het oplossen van de foutmelding 'mediaquery werkt niet in WordPress' is eenvoudig zodra u de reden hebt geïdentificeerd. U kunt de wijzigingen naar wens aanbrengen door de bovenstaande tips te volgen.

Om te voorkomen dat de foutmelding 'mediaquery werkt niet in WordPress' opnieuw optreedt, gebruik je plug-ins zoals Simple Custom CSS en WP Add Custom CSS om een mediaquery aan je website toe te voegen.

Als je de foutmelding 'mediaquery werkt niet in WordPress' kunt oplossen, neem dan contact met ons op. Wij zijn een WordPress-bureau dat bedrijven helpt veelvoorkomende WordPress-fouten op hun website op te lossen zonder downtime te veroorzaken.