Een van de componenten van responsive webdesign is CSS Media Query. WordPress-ontwikkelaars gebruiken de mediaquerytechniek om ervoor te zorgen dat een website optimaal functioneert op alle apparaten en schermformaten. Als er een probleem is met het functioneren van deze CSS-techniek, kan dit resulteren in de foutmelding 'mediaquery werkt niet in WordPress'.
Het oplossen van de fout 'mediaquery werkt niet in WordPress' is essentieel om ervoor te zorgen dat uw website voor iedereen toegankelijk is, ongeacht het schermtype en de grootte. Hieronder hebben we enkele tips gegeven om de foutmelding 'mediaquery werkt niet in WordPress' op te lossen. Maar daarvoor volgt hier een korte uitleg van CSS-mediaquery's.
Wat zijn CSS-mediaquery's?
Als een van de kenmerken van CSS (Cascading Style Sheets) stellen mediaquery's ontwikkelaars in staat verschillende sets CSS-regels toe te passen op basis van vastgestelde voorwaarden. Het helpt hen bij het creëren van gevarieerde ontwerplay-outs op basis van het apparaattype of de grootte van de browserviewport. HTML van een webpagina .
Het is een door het 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 betere ervaring heeft bij het surfen op een website is een van de factoren voor het verbeteren van de positie van een website in de zoekresultaten, en dit is waar CSS Media Query kan helpen.
Met mediaquery's kunt u het uiterlijk van webpagina's aanpassen 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 gebruik te maken van de CSS-mediaquery kunnen ontwikkelaars websites maken die op alle apparaten toegankelijk en leesbaar zijn, zonder dat ze een aparte mobiele website hoeven te maken.
Gerelateerd : Verschil tussen een mobiele site en een responsieve site
Hier is een voorbeeld van een mediaquery:
@mediascherm en (max. breedte: 480px){koptekst {hoogte: 70px; }artikel {lettergrootte: 14px; }img { maximale breedte: 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 portretmodus op een mobiel apparaat wordt bekeken.
- Specifieke media targeten <style>, <source>, and other HTML elements with the media= attribute.
- 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. Als u de syntaxis begrijpt, kunt u mediaquery's correct gebruiken.
@mediaregel
Dit element helpt bij het declareren (specificeren) van de intentie van het opzetten van een mediaquery in CSS. Voer @media in zonder spatie ertussen.
Mediatype
Mediatype verwijst naar het type apparaat waarvoor de mediaquery wordt gebruikt. Het omvat de volgende regels:
- Alles : Geschikt voor alle apparaten, en in gevallen waarin het mediatype niet is gespecificeerd, wordt 'alles' gebruikt.
- Spraak : dit mediatype wordt toegepast (of bedoeld voor) schermlezers.
- Afdrukken : Als een paginamateriaal of document zich in de afdrukvoorbeeldmodus bevindt, wordt het mediatype 'afdruk' toegepast. Dit mediatype wordt gebruikt voor printers.
- Scherm : deze CSS-regel is van toepassing op schermen: smartphones, desktops, tablets en meer.
Mediafuncties
Het media features element wordt gebruikt om specifieke details toe te voegen. Alle mediafunctie-uitdrukkingen worden tussen haakjes geplaatst, zoals een maximale breedte van 400 px (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 'maximale breedte' van het browservenster.
- Hoogte : Dit verwijst naar de hoogte van de viewport.
- Max-height : Definieert de 'maximale hoogte' van het browservenster.
- Minimale hoogte : Definieert de 'minimale hoogte' van het browservenster.
- Oriëntatie : Dit verwijst naar de viewport-oriëntatie. (landschaps- of portretmodus).
Logische operatoren
De logische operators helpen bij het samenstellen van complexe mediaquery's en omvatten de niet-, en- en alleen-elementen. U kunt ook komma's gebruiken om een of meer mediaquery's in één regel te combineren.
- Niet : Als u de operator 'niet' gebruikt, moet u een mediatype opgeven. Doorgaans ontkent de operator 'niet' een mediaquery.
- En : voor het combineren van twee of meer mediafuncties in één enkele mediaquery gebruikt u de operator 'and'. 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 de mediaquery correct te interpreteren, waardoor problemen zoals de foutmelding 'mediaquery werkt niet in WordPress' worden voorkomen. Geef ook het mediatype op als u de operator 'niet' gebruikt.
- , (Comma) : deze operator wordt gebruikt om meerdere mediaquery's in één regel te combineren. Wanneer een komma wordt gebruikt om meerdere query's te scheiden, wordt elke query afzonderlijk afgehandeld. En als de lijst met zoekopdrachten waar is, blijft de hele lijst met mediaquery's waar.
Tips om te verhelpen dat mediaquery's niet werken 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 op het betreffende element (syntaxis) is toegepast.
Meestal is de reden dat de ‘mediaquery werkt niet in WordPress’ vrij gebruikelijk. Daarom volgen hier enkele manieren om deze fout op te lossen.
Controleer op inline CSS-declaratie
Als u de CSS binnen het HTML-document heeft gedeclareerd, kan dit de foutmelding 'mediaquery werkt niet in WordPress' veroorzaken. U kunt dit oplossen door de 'CSS gedeclareerd inline' uit het HTML-document te verwijderen.
Een andere manier is om deze declaratie te overschrijven met !important . Als u bijvoorbeeld de tekstkleur van de alinea's op mobiele apparaten wilt wijzigen in 'grijs', gebruikt u de volgende CSS-regels.
@mediascherm en (max. breedte: 1024px){ P{ kleur: grijs; }}Soms werkt dit echter niet vanwege de inlinestijl die op hetzelfde element wordt toegepast. In zulke gevallen gebruikt u de !important-regel om de inline-stijl te overschrijven en het probleem op te lossen.
@mediascherm en (max. breedte: 1024px){ P{ kleur: grijs !belangrijk; }}Positioneer mediaquery's correct
Een andere reden voor de foutmelding 'mediaquery werkt niet in WordPress' is de onjuiste positionering van mediaquery's. Om dit op te lossen, voegt u de mediaquery toe aan het einde van het stijlblad.
Omdat browsers het stijlblad van boven naar beneden lezen, kunnen codes die aan het einde van het stijlblad worden vermeld, de declaraties aan het begin overschrijven (behalve wanneer !important wordt gebruikt). Plaats bij kleine zoekopdrachten bovendien de mediaquery's vóór het grote scherm.
Bekijk dit voorbeeld
lichaam {achtergrondkleur: zwart;}@mediascherm en (min.breedte: 480px) {lichaam {achtergrondkleur: blauw;}}@mediascherm en (min.breedte: 850px) {lichaam {achtergrondkleur: lichtblauw;tekst uitlijnen: centreren;}}- 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 is.
- Als het scherm ten slotte 580px of meer is, is de achtergrondkleur 'lichtblauw' met centrale uitlijning.
Desktop versus mobiel
Zodra u een mediaquery heeft ingesteld, zou deze zowel op de desktop als mobiel optimaal moeten werken. Als er echter een fout optreedt in een van beide, gebruik dan 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
Als u de viewport en de standaardzoom niet hebt ingesteld, kan dit er ook toe leiden dat mediaquery's niet werken op mobiele apparaten. Om dit op te lossen, voegt u eenvoudig de volgende code toe aan de header van uw site. Zorg ervoor dat deze coderegels worden toegevoegd binnen het<head></head> element.
<meta name="viewport" content="width=device-width, initial-scale=1"/>Hier is de 'breedte' de viewportgrootte, ingesteld op apparaatbreedte. Het instrueert de browser om de website op natuurlijke wijze op het scherm te laten passen. Terwijl de 'initiële schaal' het zoomniveau definieert.
Lezen : CSS @import vermijden om de laadsnelheid van pagina's te verbeteren
Conclusie
Het is belangrijk ervoor te zorgen dat uw website voor iedereen toegankelijk is, ongeacht het apparaattype. Een responsief website-ontwerp kan u helpen verkeer uit verschillende bronnen te genereren. Met de mobile-first indexering van Google zou dit ook kunnen leiden tot een snellere indexering van webpagina's. Bovendien biedt het een verbeterde ervaring voor gebruikers die op mobiele apparaten op uw website surfen, wat de ranking van uw site zou kunnen verbeteren.
Het oplossen van de fout 'mediaquery werkt niet in WordPress' is eenvoudig zodra u de reden achterhaalt. U kunt de gewenste wijzigingen aanbrengen door de hierboven genoemde tips te volgen.
Om te voorkomen dat de ‘mediaquery werkt niet in WordPress’-fout opnieuw optreedt, gebruikt u plug-ins zoals Simple Custom CSS en WP Add Custom CSS om een mediaquery aan uw website toe te voegen.
Als u bovendien de foutmelding 'mediaquery werkt niet in WordPress' niet kunt oplossen, kunt u contact met ons opnemen. Wij zijn een WordPress-bureau dat bedrijven helpt veelvoorkomende WordPress-fouten op hun website op te lossen zonder enige downtime te veroorzaken.
Wilt u een responsieve WordPress-website maken?
Onze ontwikkelaars kunnen snelle en foutloze responsieve websites bouwen.
