Siden slutten av april 2015 har Google bemerket den økende bruken av mobile enheter, og har straffet nettsteder hvis sider ikke er mobilklare. Konsekvens, for din SEO, må du sørge for at nettstedet ditt vises anstendig på både store og små skjermer.

responsiv wordpress design medieregel css3

I denne artikkelen skal jeg vise deg hvordan du kan sette nettstedet ditt på siden ved hjelp av regelen @media av CSS3.

Det er viktig å merke seg at begrepene "responsiv" og "mobilkompatibel" ofte brukes om hverandre til tross for forskjellen i deres virkelige betydning. Å forstå hva hvert betyr er viktig for å kunne sikre at nettstedet ditt oppfyller de nødvendige kriteriene for å imøtekomme alle skjermstørrelser.

Men før, hvis du aldri har installert WordPress Discover Hvordan installere en WordPress blogg 7 trinn et Hvordan finne, installere og aktivere en WordPress tema på bloggen din 

La oss gå tilbake til hvorfor vi er her.

Responsive og kompatible-mobile

Nettsteder som ikke er det verken lydhør eller kompatibel-mobil, vises identisk på alle skjermer, dvs. versjonen for store skjermer vises overalt. På mindre skjermer må du bla siden horisontalt for å se alt innholdet. De er vanskelige å navigere på på disse skjermene. 

Oppdag også disse 8 WordPress plugins for å tilpasse utseendet på nettstedet ditt

Et nettsted er Mobile kompatibel når det bare oppfyller det strenge minimumet for å bli sett på mobil, noe som ikke gjør det til et responsivt nettsted. For eksempel kan et nettsted betraktes som mobilkompatibelt hvis du ikke trenger å navigere horisontalt. Dette får elementene til å bli små og skille seg ut. Du må da zoome inn for å lese innholdet.design wordpress responsiv regel media css3 2

På deres side nettstedene responsive tilpasses perfekt til forskjellige skjermstørrelser. De omdefinerer elementene sine slik at de lett kan sees og brukes på de minste skjermene. Dette er typen design du vil ha for nettstedet ditt.

Se også vår 10 WordPress plugins for å lage et bestillingsskjema på nettstedet ditt

Du vet nå forskjellen mellom responsiv og kompatibel mobil. Vi vil nå se regelen @media av CSS3 som lar deg oppdatere nettstedet ditt for responsivt eller for å lage ganske enkelt WordPress-temaer med responsivt innhold.

Regelen @media fra CSS3

For å gjøre temaet responsivt, trenger du regelen @media av CSS3. I utgangspunktet lar den deg definere stilene du vil bruke for en bestemt type (størrelse) skjerm. Du bruker den som en annen CSS-regel (med seler) med den eneste forskjellen at den hekker andre CSS-regler.

@media mediatype (uttrykk) {css-test-velger {eiendom1: verdi1; eiendom2: verdi2; }}

I denne strukturen er elementene inne i regelen @ media bare arbeid når kind-of-media spesifisert for å ha blitt oppdaget. Hvilken type medium du har valgt, kan du spesifisere egenskapene i forhold til dimensjoner.

design wordpress responsiv regel media css3 3Oppdag Hvordan bruke grensesnitt og brukeropplevelse på WordPress

Regelen @media oppdager for deg hvilken type skjerm nettstedet ditt er besøkt med, og velger reglene som passer best for denne typen skjerm. Alle større nettlesere har allerede integrert regelen @media.

Her er listen til din informasjon: Chrome , Safari, Firefox, IE, Opera et Edge.

Definer målskjermene

Hvis du ønsker å endre en WordPress tema eksisterende, vennligst ta en sikkerhetskopi av CSS for sistnevnte for å kunne gå tilbake om nødvendig.

Les også artikkelen vår om Hvordan gradvis laste inn Facebook og Disqus kommentarer

Som vi har sett i strukturen, må du videresende for å definere skjermtypen @media hvilken type skjerm du målretter mot. Her er listen over de forskjellige skjermtyper:

- alle : for alle typer skjermer eller for dimensjonene spesifisert i uttrykk
- skjerm : for alle skjermer, enten mobil, nettbrett, bærbar eller stasjonær
- skrive ut : for skrivere, hvis du vil ha spesielle stiler for sidene som kan skrives ut
- tale : for skjermlesere, hvis du vil ha stiler for synshemmede.

Det er også operatører du kan sette før skjermtypen; som ikke for å vise stiler for skjermer som er av en annen type enn den som er spesifisert eller bare for å bare bruke stiler på spesifiserte skjermer. Du kan derfor ha:

@media bare skjerm

Definer stiler for skjermdimensjoner

Du kan bruke uttrykk for å gi mer informasjon om skjermens egenskaper. Etter @media skriv og etterfulgt av uttrykket. Hvis du bruker mer enn ett uttrykk, bør de alle være atskilt med og. Her er et eksempel på strukturen:

@media only screen and (max-width: 640px) {selector-css-example {/ * Din vanlige CSS her * /}}

I dette eksemplet bruker jeg max bredde med en verdi på 640px. Dette er for å angi en maksimal skjermbredde på størrelsen på en iPhone eller en liten Android-smarttelefon. Med denne typen struktur har du kontroll over hvordan nettstedet ditt ser ut på forskjellige enheter. Her er en liste over egenskaper relatert til dimensjoner du kan bruke i uttrykk :

Oppdag også vår 8 SEO WordPress plugins for å optimalisere SEO på nettstedet ditt

- mi bredde et max bredde : henholdsvis minimums- og maksimumbredde som kreves for visning av stiler i regelen @media. Én pixel og stiler til vises ikke.

- mi-høyde et max-høyde : henholdsvis minimums- og maksimumshøyde som kreves for å vise stilene i regelen @media. Fordi de fleste skjermer er designet for å rulle sider loddrett, egenskaper min-høyde et max-høyde er lite brukt.

Her er en liste over skjermstørrelser for noen terminaler:

- IPhone: 640px
- IPad: 1024px
Tabletter: 1366 px
- Android-smarttelefon: 640 piksler, 720 piksler, 854 piksler, 960 piksler
- Android ekstra stor: 1024px, 1066px
- Windows-telefon: 480
- Windows-telefon stor: 768 px
- unge og gamle: 320 px
- Ultrabook / bærbare datamaskiner: 1366 px
- stasjonære og TV-er: 1920 px

Det er mange andre egenskaper du kan bruke i uttrykk. For eksempel, hvis du målretter mot stasjonære eller TV-skjermer som kan vise bilder i forholdet 16: 9, kan du bruke en struktur som denne:

@media only screen and (min-width: 1920px) and (device-aspect-ratio: 16/9) {selector-css-example {/ * Din vanlige CSS her * /}}

 For mer komplette lister og eksempler, konsulter w3schools et Mozilla Developpers.

Test den responsive funksjonaliteten til nettstedet ditt

Når du endrer eller bygger din WordPress tema eller på slutten hvis du liker overraskelser, må du teste resultatet for å se om det endelig er responsivt. Husk at Google ser etter nettsteder som ikke er responsive.

Se også disse 10 WordPress plugins for å lage faner på bloggen din

Mangler du å ha alle de mobile enhetene du målretter mot, er det (heldigvis for våre børser) et stort antall verktøy for å se hvordan nettstedet ditt tilpasser seg forskjellige skjermer.

Direkte i nettleseren på datamaskinen din kan du bruke Windows Resizer Chrome Browser Extension, ResponsiveResize, ResizeMe ou Firesizer. Nedenfor er et bilde av BlogPasCher i Responsive Design View som leveres som standard med Firefox.

css3-media-firefox-responsiv-design-view

Det er også nettsteder dedikert til oppgaven:

Responsivepx

css3-media-responsivepx

Denne nettsiden har det spesielle ved å la deg velge skjermdimensjonene selv. Vær oppmerksom på at denne nettsiden laster inn din i en ramme. Så hvis din WordPress tema ble designet for ikke å vises i en ramme, så det er godt mulig at den ikke vises her.

IPad Peek

https://blogpascher.com/wp-admin/post.php?post=60969&action=editcss3-media-ipad-peek

Dette nettstedet er nyttig for å teste nettstedet ditt på de nyeste Apple-, iPad- og iPhone-enhetene. Bare skriv inn url. Merk at den er gjenstand for samme rammeproblem som responsivepx.

Mobiltelefon Emulator

css3-media-mobile-phone-emulator

På dette nettstedet kan du teste dine på små skjermer og på eldre modeller av telefoner som du velger på høyre side av skjermen. Du kan også konfigurere noen skjermegenskaper.

Google Mobile Friendly test

css3-media-google-mobilvennlige test

Dette er en av de viktigste testene, om ikke de viktigste. Bare skriv inn adressen din i baren og klikk på Analyser for å starte testen. Etter testen viser verktøyet en rapport og en poengsum. Hvis testen er positiv, desto bedre blir du ikke straffet av Google.

Hvis du ikke er en utvikler, anbefaler jeg deg en liste over responsive WordPress-temaer å starte.

Anbefalte ressurser

Oppdag også andre anbefalte ressurser som vil hjelpe deg med å forføre partnere og abonnenter bedre, men også forbedre sikkerheten til nettstedet ditt.

konklusjonen

Her! du vet alt det er å vite om hvordan du kan gjøre nettstedet ditt eller WordPress-temaet responsivt ved hjelp av regelen @media av CSS3. Hvis vi savnet et WordPress-tema som er høyt for deg, eller som du foretrekker, kan du legge igjen en lenke i seksjonen commentaires nedenfor.

Du vil imidlertid også kunne konsultere våre ressources, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Vi inviterer deg også til del på de forskjellige sosiale nettverkene dine.

...