En av komponenterna i responsiv webbdesign är CSS Media Query. WordPress-utvecklare använder mediaquerytekniken för att säkerställa att en webbplats fungerar optimalt på alla enheter och skärmstorlekar. Om det uppstår problem med funktionen hos denna CSS-teknik kan det resultera i felmeddelandet "mediaquery fungerar inte i WordPress".
Att åtgärda felet "media query not working in WordPress" är viktigt för att säkerställa att din webbplats är tillgänglig för alla, oavsett skärmtyp och storlek. Nedan har vi gett några tips för att åtgärda felet "media query not working in WordPress". Men innan dess, här är en kort förklaring av CSS-mediafrågor.
Vad är CSS-mediafrågor?
Som en av funktionerna i CSS (Cascading Style Sheets) gör mediafrågor det möjligt för utvecklare att tillämpa olika uppsättningar CSS-regler baserat på angivna villkor. Det hjälper dem att skapa varierade designlayouter baserat på enhetstyp eller storlek på webbläsarens visningsport. Mediafrågor används i en enskild CSS-fil, eller så kan du infoga den i en webbsidas HTML .
Det är en W3C-rekommenderad standard för responsiv webbdesign . Dessutom säkerställer den att det renderade innehållet är anpassningsbart till olika förhållanden, såsom skärmupplösningar, webbläsarbredd och enhetstyp.
Användning av CSS-mediafrågor
Att säkerställa att en användare får en förbättrad upplevelse när de surfar på en webbplats är en av faktorerna för att förbättra en webbplats ranking i sökresultaten, och det är här CSS Media Query kan hjälpa till.
Mediefrågor hjälper till att anpassa utseendet på webbsidor på alla enheter, skärmstorlekar och upplösningar. De ger specifika instruktioner som talar om för webbläsaren hur webbsidor ska renderas när de visas på mobila enheter, datorer eller andra enheter.
Genom att använda CSS-mediafrågan kan utvecklare skapa webbplatser som är tillgängliga och läsbara på alla enheter utan att behöva skapa en separat mobilwebbplats.
Relaterat : Skillnaden mellan en mobil webbplats och en responsiv webbplats
Här är ett exempel på en mediefråga:
@mediaskärm och (maxbredd: 480px){sidhuvud {höjd: 70px; }artikel { fontstorlek: 14px; }img { maxbredd: 480px; }}Mediefrågor används för:
- Tillämpa villkorliga stilar med CSS @media och @import at-rules.
- Flytta ett sidofält under webbplatsens innehåll när en sida visas i stående läge på en mobil enhet.
- Inriktning på specifika medier <style>, <source>, and other HTML elements with the media= attribute.
- Justera kolumnbredden baserat på enhetens skärmstorlek.
- Ändra layouter på mobila enheter från en layout med två kolumner till en med en kolumn.
Syntax för mediefrågor
En mediefråga består av följande fyra element. Genom att förstå syntaxen kan du använda mediefrågor korrekt.
@media Regel
Det här elementet hjälper till att deklarera (specificera) avsikten med att skapa en mediafråga i CSS. Ange @media utan mellanslag.
Medietyp
Medietyp avser den typ av enhet som mediefrågan används för. Den inkluderar följande regler:
- Alla : Lämplig för alla enheter, och i de fall där medietypen inte anges används 'alla'.
- Tal : Denna medietyp används för (eller är avsedd för) skärmläsare.
- Skriv ut : Om ett sidmaterial eller dokument är i förhandsgranskningsläge används medietypen 'utskrift'. Denna medietyp används för skrivare.
- Skärm : Denna CSS-regel gäller för skärmar – smartphones, stationära datorer, surfplattor med mera.
Mediefunktioner
Elementet mediafunktioner används för att lägga till specifika detaljer. Alla uttryck för mediafunktioner placeras inom hakparenteser, till exempel en maxbredd på 400px (mobila enheter). Här används mediafunktionen med maxbredd för mobila enheter.
Andra mediefunktioner och deras funktioner är följande:
- Bredd : Detta hänvisar till visningsportens bredd.
- Maxbredd : Definierar webbläsarfönstrets maximala bredd.
- Höjd : Detta hänvisar till visningsportens höjd.
- Maxhöjd : Definierar webbläsarfönstrets maximala höjd.
- Min-höjd : Definierar webbläsarfönstrets 'minimihöjd'.
- Orientering : Detta hänvisar till visningsportens orientering. (liggande eller stående läge).
Logiska operatorer
De logiska operatorerna hjälper till att skapa komplexa mediefrågor och inkluderar elementen *not*, *and* och *only*. Man kan också använda kommatecken för att kombinera en eller flera mediefrågor till en enda regel.
- Not : Om du använder operatorn 'not' måste du ange en medietyp. Vanligtvis negerar operatorn 'not' en mediefråga.
- Och : För att kombinera två eller flera mediefunktioner i en enda mediefråga, använd operatorn 'och'. Den här operatorn kan också hjälpa till att koppla ihop medietyper med mediefunktioner.
- Endast : Operatorn "endast" är viktig för äldre webbläsare. Den hjälper äldre webbläsare att tolka mediefrågan korrekt, vilket förhindrar problem som felet "mediefrågan fungerar inte i WordPress". Ange även medietypen när du använder operatorn "inte".
- , (Komma) : Den här operatorn används för att kombinera flera mediefrågor till en enda regel. När ett kommatecken används för att separera flera frågor hanteras varje fråga separat. Dessutom, om listan med frågor är sann, förblir hela medielistan sann.
Vanliga orsaker till varför mediefrågor inte fungerar i WordPress
Mediafrågor är viktiga för att uppnå en responsiv design på olika enheter, men de kan ibland misslyckas med att fungera som förväntat i WordPress. Nedan följer de vanligaste orsakerna till detta och hur man felsöker dem:
- CSS-filen är inte korrekt länkad eller åsidosatt : Ett av de vanligaste problemen är att din anpassade CSS inte tillämpas korrekt. Detta händer ofta när stilarket inte är korrekt länkat eller när ett annat plugin eller tema åsidosätter dina stilar.
- Felaktig syntax i mediafrågan : Mediafrågor måste skrivas med korrekt syntax för att fungera effektivt. Fel som saknade parenteser eller felaktigt använda nyckelord som "endast skärm" kan göra att de misslyckas helt. Att följa ett enkelt exempel för att strukturera dina frågor kan hjälpa till att identifiera vad som går fel.
- Problem med cachelagring (relaterade till webbläsare eller plugin) : Även när dina anpassade CSS- och mediefrågor är korrekt konfigurerade kan cachning få det att verka som om ingenting ändras. WordPress cachelagringsplugins, i kombination med din webbläsares egen cache, hanterar ofta föråldrade filer.
Behöver du hjälp med att åtgärda mediefrågor i WordPress?
Om du fortfarande har problem med responsivitet eller om anpassad CSS inte fungerar korrekt, finns våra WordPress-experter här för att hjälpa dig.
Tips för att åtgärda problem med mediafrågor i WordPress
En CSS-mediafråga kan resultera i ett fel av flera anledningar. Ibland fungerar mediafrågan på en mobil enhet men inte på en dator. Ibland fungerar den inte på alla enheter. För att kontrollera din webbplats mediafråga, använd webbläsarens utvecklarverktyg och granska din webbplats CSS. Klicka på fliken "Stilar" för att se vilken stil som tillämpas på elementet (syntaxen) i fråga.
För det mesta är orsaken till att "mediafrågan inte fungerar i WordPress" ganska vanlig. Här är några sätt att åtgärda detta fel.
Kontrollera om det finns en inline CSS-deklaration
Om du har deklarerat CSS i HTML-dokumentet kan det orsaka felet "media query not working in WordPress". Du kan åtgärda detta genom att ta bort "CSS declared inline" från HTML-dokumentet.
Ett annat sätt är att åsidosätta denna deklaration med ! important . För att till exempel ändra textfärgen på stycken till "grå" på mobila enheter, använd följande CSS-rader.
@mediaskärm och (maxbredd: 1024px){ p{ färg: grå; }}Ibland fungerar dock detta inte på grund av den inline-stil som tillämpas på samma element. I sådana fall, använd !important-regeln för att åsidosätta den inline-stilen och åtgärda problemet.
@mediaskärm och (maxbredd: 1024px){ p{ färg: grå !viktigt; }}Placera mediefrågor korrekt
En annan orsak till felet "media query not working in WordPress" är felaktig placering av mediafrågor. För att åtgärda detta, lägg till mediafrågan i slutet av stilarket.
Eftersom webbläsare läser stilarket uppifrån och ner kan koder som nämns i slutet av stilarket åsidosätta deklarationerna som gjorts i början (förutom när !important används). Dessutom, för små frågor, placera mediafrågorna före den stora skärmen.
Kolla in det här exemplet
kroppbakgrundsfärg: svart;}@mediaskärm och (minimumbredd: 480px) {kroppbakgrundsfärg: blå;}}@mediaskärm och (minimumbredd: 850px) {kroppbakgrundsfärg: ljusblå;text-justera: centrera;}}- I den första regeln är bakgrundsfärgen "svart" om skärmen är mindre än 480 pixlar.
- I den andra mediefrågan är bakgrundsfärgen "blå" om skärmen är mellan 480 och 849 pixlar.
- Slutligen, om skärmen är 580px eller mer, kommer bakgrundsfärgen att vara "ljusblå" med centrerad justering.
Dator kontra mobil
När du har ställt in en mediefråga bör den fungera optimalt på både dator och mobil. Om det dock uppstår ett fel på någon av de två, använd följande tips för att lösa problemet.
Media Query fungerar inte på datorn
Om du har använt mediefunktionen "max-device-width" istället för "max-width" kan det resultera i att mediefrågan inte fungerar på skrivbordet. Här hänvisar "max-width" till storleken på enhetens visningsyta, medan "max-device-width" hänvisar till skärmstorleken på en enhet (mobil).
För att åtgärda felet "mediafrågan fungerar inte på skrivbordet", ändra mediafunktionen till "max-width". Detta anger webbläsarens visningsområde, inte enhetens faktiska skärmstorlek.
Media Query fungerar inte på mobila enheter
Likaså, om du inte har ställt in visningsporten och standardzoomen, kan det leda till att mediefrågor inte fungerar på mobila enheter. För att åtgärda detta, lägg helt enkelt till följande kod i webbplatsens rubrik. Se till att dessa kodrader läggs till i<head></head> element.
<meta name="viewport" content="width=device-width, initial-scale=1"/>Här är "width" visningsportens storlek, inställd på enhetsbredd. Den instruerar webbläsaren att rendera webbplatsen så att den passar skärmen naturligt. Medan "initial-scale" definierar zoomnivån.
Läs : Hur man undviker CSS @import för att förbättra sidans laddningshastighet
Slutsats
Att se till att din webbplats är tillgänglig för alla, oavsett enhetstyp, är viktigt. En responsiv webbdesign kan hjälpa dig att generera trafik från olika källor. Med Googles mobilorienterade indexering kan det också leda till snabbare indexering av webbsidor. Dessutom ger det en förbättrad upplevelse för användare som surfar på din webbplats på mobila enheter, vilket kan förbättra din webbplats ranking.
Att åtgärda felet "media query not working in WordPress" är enkelt när du väl identifierat orsaken. Du kan göra de ändringar som behövs genom att följa tipsen som nämns ovan.
För att undvika att felet "media query not working in WordPress" uppstår igen, använd plugins som Simple Custom CSS och WP Add Custom CSS för att lägga till en media query på din webbplats.
Om du dessutom inte kan felsöka felet "media query not working in WordPress", kontakta oss. Vi är en WordPress-byrå som hjälper företag att åtgärda vanliga WordPress-fel på sin webbplats utan att orsaka driftstopp.
