En af komponenterne i responsivt webdesign er CSS Media Query. WordPress-udviklere bruger media query-teknikken til at sikre, at et websted fungerer optimalt på tværs af alle enheder og skærmstørrelser. Hvis der er et problem med funktionen af denne CSS-teknik, kan det resultere i fejlmeddelelsen 'media query working not in WordPress'.
Det er vigtigt at rette fejlen 'medieforespørgsel virker ikke i WordPress' for at sikre, at dit websted er tilgængeligt for alle, uanset skærmtype og -størrelse. Nedenfor har vi givet et par tips til at rette fejlen 'medieforespørgsel virker ikke i WordPress'. Men inden da er her en kort forklaring af CSS-medieforespørgsler.
Hvad er CSS-medieforespørgsler?
Som en af funktionerne i CSS (Cascading Style Sheets) gør medieforespørgsler det muligt for udviklere at anvende forskellige sæt CSS-regler baseret på bestemte betingelser. Det hjælper dem med at oprette varierede designlayouts baseret på enhedstypen eller størrelsen på browserens viewport. Medieforespørgsler bruges i en individuel CSS-fil, eller du kan indsætte dem i en websides HTML .
Det er en W3C-anbefalet standard for responsivt webdesign . Derudover sikrer det, at det gengivne indhold kan tilpasses forskellige forhold, såsom skærmopløsninger, browserbredde og enhedstype.
Brug af CSS-medieforespørgsler
At sikre en forbedret brugeroplevelse, når de browser på et websted, er en af faktorerne for at forbedre et websteds placering i søgeresultaterne, og det er her, CSS Media Query kan hjælpe.
Medieforespørgsler hjælper med at tilpasse udseendet af websider på tværs af alle enheder, skærmstørrelser og opløsninger. De giver specifikke instruktioner, der fortæller browseren, hvordan websider skal gengives, når de vises på mobil, computer eller andre enheder.
Ved at bruge CSS-medieforespørgslen kan udviklere oprette websteder, der er tilgængelige og læsbare på alle enheder, uden at skulle oprette et separat mobilwebsted.
Relateret : Forskellen mellem en mobilside og en responsiv side
Her er et eksempel på en medieforespørgsel:
@media skærm og (maks. bredde: 480px){overskrift { højde: 70px; }artikel { skriftstørrelse: 14px; }img { maks. bredde: 480px; }}Medieforespørgsler bruges til:
- Anvendelse af betingede stilarter med CSS @media og @import at-rules.
- Flytter en sidebjælke under webstedets indhold, når en side vises i stående tilstand på en mobilenhed.
- Målretning af specifikke medier <style>, <source>, and other HTML elements with the media= attribute.
- Justering af kolonnebredde baseret på enhedens skærmstørrelse.
- Ændring af layouts på mobile enheder fra et layout med to kolonner til et layout med én kolonne.
Syntaks for medieforespørgsler
En medieforespørgsel består af følgende fire elementer. Ved at forstå syntaksen kan du bruge medieforespørgsler korrekt.
@media Regel
Dette element hjælper med at deklarere (specificere) intentionen med at oprette en medieforespørgsel i CSS. Indtast @media uden mellemrum.
Medietype
Medietype refererer til den type enhed, som medieforespørgslen bruges til. Den omfatter følgende regler:
- Alle : Velegnet til alle enheder, og i tilfælde hvor medietypen ikke er angivet, bruges 'alle'.
- Tale : Denne medietype anvendes til (eller er beregnet til) skærmlæsere.
- Udskriv : Hvis et sidemateriale eller et dokument er i udskriftsvisningstilstand, anvendes medietypen 'udskriv'. Denne medietype bruges til printere.
- Skærm : Denne CSS-regel gælder for skærme – smartphones, desktops, tablets og mere.
Mediefunktioner
Elementet mediefunktioner bruges til at tilføje specifikke detaljer. Alle udtryk for mediefunktioner er placeret i parenteser, f.eks. en maksimal bredde på 400px (mobilenheder). Her bruges mediefunktionen med maksimal bredde til mobile enheder.
Andre mediefunktioner og deres funktioner er som følger:
- Bredde : Dette refererer til visningsportens bredde.
- Maksimal bredde : Definerer browservinduets 'maksimale bredde'.
- Højde : Dette refererer til viewportens højde.
- Maksimal højde : Definerer browservinduets 'maksimale højde'.
- Min-højde : Definerer browservinduets 'minimumshøjde'.
- Orientering : Dette refererer til visningsfeltets orientering (liggende eller stående tilstand).
Logiske operatorer
De logiske operatorer hjælper med at sammensætte komplekse medieforespørgsler og inkluderer elementerne `not`, `and` og `only`. Man kan også bruge kommaer til at kombinere en eller flere medieforespørgsler i en enkelt regel.
- Not : Hvis du bruger 'not-operatoren', skal du angive en medietype. Typisk negerer 'not-operatoren' en medieforespørgsel.
- Og : For at kombinere to eller flere mediefunktioner i en enkelt medieforespørgsel skal du bruge 'og'-operatoren. Denne operator kan også hjælpe med at forbinde medietyper med mediefunktioner.
- Kun : Operatoren 'kun' er vigtig for ældre browsere. Den hjælper ældre browsere med at fortolke medieforespørgslen korrekt og dermed forhindre problemer som fejlen 'medieforespørgsel fungerer ikke i WordPress'. Angiv også medietypen, når du bruger operatoren 'ikke'.
- , (Komma) : Denne operator bruges til at kombinere flere medieforespørgsler i en enkelt regel. Når et komma bruges til at adskille flere forespørgsler, håndteres hver forespørgsel separat. Derudover, hvis listen over forespørgsler er sand, forbliver hele medieforespørgselslisten sand.
Almindelige årsager til, at medieforespørgsler ikke virker i WordPress
Medieforespørgsler er afgørende for at opnå et responsivt design på tværs af forskellige enheder, men de kan nogle gange ikke fungere som forventet i WordPress. Nedenfor er de mest almindelige årsager til dette, og hvordan du fejlfinder dem:
- CSS-filen er ikke korrekt linket eller tilsidesat : Et af de mest almindelige problemer er, at din brugerdefinerede CSS ikke anvendes korrekt. Dette sker ofte, når stylesheet ikke er linket korrekt, eller når et andet plugin eller tema tilsidesætter dine styles.
- Forkert syntaks i medieforespørgslen : Medieforespørgsler skal skrives med korrekt syntaks for at fungere effektivt. Fejl som manglende parenteser eller misbrugte nøgleord som "kun skærm" kan få dem til at mislykkes fuldstændigt. At følge et simpelt eksempel på strukturering af dine forespørgsler kan hjælpe med at identificere, hvad der går galt.
- Problemer med cachelagring (browser- eller plugin-relateret) : Selv når dine brugerdefinerede CSS- og medieforespørgsler er konfigureret korrekt, kan cachelagring få det til at se ud som om intet ændrer sig. WordPress cache-plugins kombineret med din browsers egen cache viser ofte forældede filer.
Brug for hjælp til at rette medieforespørgsler i WordPress?
Hvis du stadig kæmper med problemer med responsivitet, eller hvis brugerdefineret CSS ikke fungerer korrekt, er vores WordPress-eksperter her for at hjælpe.
Tips til at løse problemer med medieforespørgsler, der ikke fungerer i WordPress
En CSS-medieforespørgsel kan resultere i en fejl af flere årsager. Nogle gange fungerer medieforespørgslen muligvis på en mobilenhed, men ikke på en desktop. Nogle gange fungerer den muligvis ikke på alle enheder. For at kontrollere dit websteds medieforespørgsel skal du bruge browserens udviklerværktøjer og inspicere dit websteds CSS. Klik på fanen 'Styles' for at se, hvilken stil der er anvendt på det pågældende element (syntaks).
Årsagen til, at 'medieforespørgslen ikke virker i WordPress', er oftest ret almindelig. Derfor er her et par måder at rette denne fejl på.
Tjek for inline CSS-deklaration
Hvis du har deklareret CSS i HTML-dokumentet, kan det forårsage fejlen 'media query not working in WordPress'. Du kan løse dette ved at fjerne 'CSS declared inline' fra HTML-dokumentet.
En anden måde er at tilsidesætte denne deklaration med ! vigtigt . For eksempel, for at ændre tekstfarven på afsnittene til 'grå' på mobile enheder, skal du bruge følgende CSS-linjer.
@media skærm og (maks. bredde: 1024px){ p{ farve: grå; }}Dette virker dog nogle gange ikke på grund af den inline-stil, der anvendes på det samme element. I sådanne tilfælde skal du bruge !important-reglen til at tilsidesætte den inline-stil og løse problemet.
@media skærm og (maks. bredde: 1024px){ p{ farve: grå !vigtigt; }}Placer medieforespørgsler korrekt
En anden årsag til fejlen 'medieforespørgsel virker ikke i WordPress' er den forkerte placering af medieforespørgsler. For at rette dette skal du tilføje medieforespørgslen i slutningen af typografiarket.
Da browsere læser typografiarket fra top til bund, kan koder nævnt i slutningen af typografiarket tilsidesætte deklarationerne fra starten (undtagen når !important bruges). Derudover skal medieforespørgslerne for små forespørgsler placeres før den store skærm.
Tjek dette eksempel
kropbaggrundsfarve: sort;}@media skærm og (min. bredde: 480px) {kropbaggrundsfarve: blå;}}@media skærm og (min. bredde: 850px) {kropbaggrundsfarve: lyseblå;tekstjustering: center;}}- I den første regel er baggrundsfarven 'sort', hvis skærmen er mindre end 480px.
- I den anden medieforespørgsel er baggrundsfarven 'blå', hvis skærmen er mellem 480 og 849 pixels.
- Endelig, hvis skærmen er 580px eller mere, vil baggrundsfarven være 'lyseblå' med centerjustering.
Desktop vs. mobil
Når du har indstillet en medieforespørgsel, burde den fungere optimalt på både computer og mobil. Hvis der dog er en fejl på en af de to, kan du bruge følgende tips til at løse problemet.
Medieforespørgsel virker ikke på skrivebordet
Hvis du har brugt mediefunktionen 'max-device-width' i stedet for 'max-width', kan det resultere i, at medieforespørgslen ikke fungerer på skrivebordet. Her refererer 'max-width' til størrelsen på enhedens visningsområde, mens 'max-device-width' refererer til skærmstørrelsen på en enhed (mobil).
For at rette fejlen 'medieforespørgsel virker ikke på skrivebordet' skal du ændre mediefunktionen til 'maks. bredde'. Dette angiver browserens visningsområde, ikke enhedens faktiske skærmstørrelse.
Medieforespørgsel virker ikke på mobile enheder
Ligeledes, hvis du ikke har indstillet viewport og standardzoom, kan det føre til problemer med medieforespørgsler, der ikke fungerer på mobile enheder. For at løse dette skal du blot tilføje følgende kode til dit websteds header. Sørg for, at disse kodelinjer tilføjes i<head></head> element.
<meta name="viewport" content="width=device-width, initial-scale=1"/>Her er 'bredden' visningsstørrelsen, indstillet til enhedsbredde. Den instruerer browseren i at gengive webstedet, så det passer naturligt til skærmen. Hvorimod 'initial-scale' definerer zoomniveauet.
Læs : Sådan undgår du CSS @import for at forbedre sideindlæsningshastigheden
Konklusion
Det er vigtigt at sikre, at din hjemmeside er tilgængelig for alle, uanset enhedstype. Et responsivt hjemmesidedesign kan hjælpe dig med at generere trafik fra forskellige kilder. Med Googles mobilorienterede indeksering kan det også føre til hurtigere indeksering af websider. Derudover vil det give en forbedret oplevelse for brugere, der browser på din hjemmeside på mobile enheder, hvilket kan forbedre din hjemmesides rangering.
Det er ligetil at rette fejlen 'medieforespørgsel virker ikke i WordPress', når du først har identificeret årsagen. Du kan foretage de nødvendige ændringer ved at følge ovenstående tips.
For at undgå at fejlen 'medieforespørgsel fungerer ikke i WordPress' opstår igen, skal du bruge plugins som Simple Custom CSS og WP Add Custom CSS til at tilføje en medieforespørgsel til dit websted.
Hvis du desuden ikke kan finde ud af fejlen 'medieforespørgsel virker ikke i WordPress', så kontakt os. Vi er et WordPress-bureau , der hjælper virksomheder med at rette almindelige WordPress-fejl på deres hjemmeside uden at forårsage nedetid.
