Responsive web design grunnleggende

• Angi viewport
• Størrelse innhold til viewport
• Bruk CSS media queries for respons
• Hvordan å velge stoppunkter
• Vise media query stoppunkter i Chrome DevTools

bruk av mobile enheter til å surfe på internett fortsetter å vokse på en astronomisk tempo, og disse enhetene er ofte begrenset av skjerm størrelse og krever en annen tilnærming til hvordan innhold som er lagt ut på skjermen.,

Responsive web design, og ble opprinnelig brukt av Ethan Marcotte i En Liste fra Hverandre, svarer til behovene til brukere og enheter, de»re bruk av. Layout endringer basert på størrelse og egenskapene til enheten. For eksempel, på en telefon brukere vil se innholdet som vises i en enkelt kolonne vis; en tablett kan vise det samme innholdet i to kolonner.

Et mangfold av ulike skjermstørrelser eksisterer over telefoner, «phablets,» nettbrett, pc-er, spillkonsoller, Tv-er, og selv wearables., Skjermen størrelser er alltid i endring, så det er viktig at ditt nettsted kan tilpasse seg enhver skjermstørrelse, i dag eller i fremtiden. I tillegg enheter har forskjellige funksjoner med som vi samhandler med dem. For eksempel noen av dine besøkende vil være ved hjelp av en berøringsskjerm. Moderne responsive design anser alle disse tingene for å optimalisere opplevelsen for alle.

Angi viewport #

Sider, som er optimalisert for et utvalg av enheter må inneholde en meta viewport-koden i hodet av dokumentet.En meta viewport tag gir leseren instruksjoner om hvordan du kontrollerer side»s mål og skalering.,

for Å forsøke å gi den beste opplevelsen, mobile nettlesere renderthe side på en desktop skjermen bredde (vanligvis 980px, selv om dette variesacross enheter), og deretter prøve å gjøre innhold til å se bedre ut ved increasingfont størrelser og skalering innholdet til å passe skjermen.Dette betyr at skriftstørrelser kan synes inkonsekvent å-brukere,som kan ha til å dobbelttrykke eller pinch-to-zoomin for å se og samhandle med innhold.,

ved Hjelp av meta-viewport-verdi width=device-width instruerer siden for å matchthe skjermen»s bredde i enheten-uavhengig punkter. En enhet (eller tetthet) uavhengig pixel å være en representasjon av en enkelt piksel, noe som kan på en høy tetthet skjermen består av mange fysiske punkter. Dette gjør siden til reflowcontent å matche ulike skjermstørrelser, enten gjengis på en liten mobilephone eller et stort desktop skjermen.,

Noen browserskeep siden»s bredde konstant når du roterer til landscapemode, og zoom heller enn å flyte til det fyller skjermen., Å legge til verdieninitial-scale=1 instruerer nettlesere for å etablere et 1:1 forhold mellom CSSpixels og enhet-uavhengig punkter uavhengig av enhet orientering, andallows siden for å dra full nytte av landskapet bredde.

Den ikke har en <meta name="viewport"> – koden med width eller initial-scaleLighthouse revisjon kan hjelpe deg med å automatisere prosessen med å sørge for at din HTML-dokumenter ved hjelp av viewport meta tag på riktig måte.,

Sikre et tilgjengelig viewport #

I tillegg til å sette en initial-scaledu kan også angi følgende attributter på viewport:

• minimum-scale
• maximum-scale
• user-scalable

hvis satt, disse kan deaktivere brukeren»s evne til å zoome viewport,som potensielt kan forårsake tilgjengelighetsproblemer.Derfor vil vi ikke anbefale å bruke disse egenskapene.,

Størrelse innhold til viewport #

På både stasjonære og mobile enheter,og brukere er vant til å rulle nettsteder vertikalt, men ikke horisontalt;å tvinge brukeren til å bla horisontalt eller for å zoome outin for å se hele siden resulterer i en dårlig brukeropplevelse.

Når du utvikler et nettsted med en meta viewport-tag,det er lett å skulle lage side innhold som doesn»t helt passer innenfor det angitte vinduet.For eksempel, et bilde som vises i en bredde som er bredere enn den viewportcan føre til viewport for å rulle horisontalt.,Du bør justere dette innholdet til å passe innenfor bredden av vinduet,slik at brukeren ikke trenger å bla horisontalt.

Innholdet er ikke riktig størrelse for viewportLighthouse revisjon kan hjelpe deg med å automatisere prosessen med å oppdage overfylte innhold.

Bilder #

Et bilde har faste dimensjoner, og hvis den er større enn viewport vil føre til et rullefelt.En vanlig måte å håndtere dette problemet på, er å gi alle bilder i en max-width av 100%.,Dette vil få bildet til å krympe for å passe den plassen den har,bør viewport størrelse være mindre enn biletet.Men fordi max-width snarere enn width er 100%,vil bildet ikke strekke større enn sin naturlige størrelse.Det er generelt trygt å legge følgende til stylesheetso at du vil aldri ha et problem med bilder forårsaker en rullefeltet.,

Legg til dimensjonene på bildet til i img-element #

Når du bruker max-width: 100% du overstyre den naturlige dimensjonene på bildet,men du bør likevel bruke width og height attributter på <img> – tag-en.Dette er fordi moderne nettlesere vil bruke denne informasjonen for å reservere plass for imagebefore at den er lastet inn,vil dette bidra til å unngå layout skifter innhold som er lastet inn.,

Layout > #

Siden dimensjonene på skjermen og bredde i CSS punkter varierer mye mellom enheter(for eksempel mellom telefoner og nettbrett, og til og med mellom ulike telefoner),og innholdet bør ikke stole på et bestemt vindu bredde til å gjengi godt.

I det siste, dette ønsket innstilling elementer som brukes til å lage layout i prosenter.I eksempelet under kan du se en to-kolonne layout med flyte-elementer, størrelse ved hjelp av punkter.Når vinduet blir mindre enn den totale bredden på kolonnene, er vi nødt til å bla horizontallyto se innholdet.,

Ved hjelp av prosenter for bredder, kolonner alltid være en viss prosentandel av beholderen.Dette betyr at kolonnene bli smalere, snarere enn å skape et rullefelt.

Moderne CSS layout teknikker som f.eks. Flexbox, Grid Layout, og Multicolmake etableringen av disse fleksible nett mye enklere.,

Flexbox #

Denne layout metoden er ideell når du har et sett med elementer av forskjellige sizesand du ønsker dem til å passe perfekt i en rad eller rader,med mindre elementer som tar mindre plass og større som får mer plass.

I en responsive design, kan du bruke Flexbox til å vise elementer som en enkelt rad,eller pakket inn flere rader som kapasiteten minsker.

Les mer om Flexbox.

CSS-Grid Layout #

CSS-Grid Layout gir mulighet for enkel oppretting av fleksibelt kraftnett.,Hvis vi ser på tidligere fløt eksempel,snarere enn å skape vår kolonner med prosenter,vi kunne bruke grid layout og fr enhet,som representerer en del av den tilgjengelige plassen i beholderen.

Rutenett kan også brukes til å lage vanlige grid layout,med så mange elementer som vil passe.Antall tilgjengelig spor vil bli redusert som skjermstørrelsen krymper.I under demoen, vi har så mange kort som det er plass til på hver rad,med en minimum størrelse på 200px.,

Les mer om CSS Grid Layout

Flere-kolonne layout #

For noen typer oppsett du kan bruke Flere-kolonne Layout (Multicol),som kan skape responsive antall kolonner med column-width eiendom.I demoen nedenfor, kan du se at kolonnene er lagt til dersom det er rom for en annen 200px kolonne.,

Les mer om Multicol

Bruk CSS media queries for respons #

noen Ganger vil du behov for å gjøre mer omfattende endringer i layoutto støtte en bestemt skjermstørrelse enn teknikkene som er vist ovenfor vil tillate.Dette er der hvor media queries bli nyttig.

Media queries er enkle filtre som kan brukes til CSS-stiler.,De gjør det enkelt å endre stiler basert på typer av enheten gjengivelse av innholdet,eller funksjonene i denne enheten, for eksempel bredde, høyde, retning, evnen til å sveve,og om enheten brukes som en berøringsskjerm.,

for Å gi ulike stiler for å skrive ut,må du fokusere på en type utgang slik at du kan inkludere et stylesheet med print stiler som følger:

Alternativt, du kan omfatte skrive stiler i din viktigste stylesheet ved hjelp av en media query:

For responsiv web design, vi er vanligvis spørring funksjoner av devicein for å gi en annen layout på mindre skjermer,eller når vi oppdager at våre besøkende bruker en berøringsskjerm.

Media spørringer basert på viewport størrelse #

Media søk gjør det mulig for oss å skape en forståelsesfull experiencewhere bestemte stiler er brukt til små skjermer, store skjermer, og hvor som helst i mellom.Det har vi oppdager her er derfor skjermstørrelse,og vi kan teste for følgende ting.,

• width (min-width, max-width)
• height (min-height, max-height)
• orientation
• aspect-ratio

All of these features have excellent browser support,for more details including browser support information seewidth,height,orientation, andaspect-ratio on MDN.

Media spørringer basert på enheten evne #

Gitt spekter av enheter som er tilgjengelige, kan vi ikke anta at alle store enheten er en vanlig desktopor bærbar datamaskin, eller at folk bare bruker en berøringsskjerm på en liten enhet.,Med noen av de nyere tilskuddene til media queries specificationwe kan teste for funksjoner som for eksempel den typen peker som brukes til å samhandle med deviceand om brukeren kan holde musepekeren over elementer.

• hover
• pointer
• any-hover
• any-pointer

Prøv å se på denne demoen på forskjellige enheter,slik som en vanlig stasjonær datamaskin og en telefon eller nettbrett.

Disse nye funksjonene har god støtte i alle moderne nettlesere., Finn ut mer på MDN sider forhover,noen-før,pekeren,noen går.

Med any-hover og any-pointer #

funksjoner any-hover og any-pointer test hvis brukeren har capabilityto hold, eller bruke den typen peker selv om det ikke er den primære måten de samhandler med enheten.Vær veldig forsiktig når du bruker disse.Å tvinge en bruker å bytte til en mus når de bruker sine berøringsskjerm er ikke veldig vennlig!,Imidlertid, any-hover og any-pointer kan være nyttig hvis det er viktig å arbeide ut hva slags enhet en bruker har.For eksempel en bærbar pc med berøringsskjerm og styreflaten, bør samsvare med grove og fine tips,i tillegg til evnen til å sveve.

Hvordan å velge stoppunkter #

Don»t definere stoppunkter basert på enheten klasser.Å definere stoppunkter basert på bestemte enheter, produkter, varemerker,eller operativsystemer som er i bruk i dag, kan det resultere i et vedlikehold mareritt.,I stedet innholdet som i seg selv bør avgjøre hvordan layouten justeres til emballasjen.

Plukke store stoppunkter ved å starte små, så jobber opp #

Design innholdet til å passe på en liten skjerm størrelse først,deretter utvider du skjermen til et stoppunkt blir nødvendig.Dette gir deg mulighet til å optimalisere stoppunkter basert på contentand opprettholde minst antall stoppunkt mulig.

Let ‘ s arbeid gjennom eksempelet vi så i begynnelsen: værmelding.Det første trinnet er å gjøre værmeldingen ser bra ut på en liten skjerm.,

Neste, endre størrelse på nettleseren før det blir for mye tomrom mellom elementene,og prognosen bare doesn»t ser så god.Avgjørelsen er noe subjektiv, men fremfor 600px er sikkert for bredt.

for Å sette inn et stoppunkt på 600px for å opprette to media-søk på slutten av CSS for komponent,en å bruke når nettleseren er 600px og under, og når det er større enn 600px.

til Slutt, refactor CSS. Inne i media query for en max-width av 600px,legge til CSS som er bare for små skjermer., Inne i media query for enmin-width av 601px legg til CSS for større skjermer.

Plukke mindre stoppunkter når det er nødvendig #

I tillegg til å velge store stoppunkter når layout endres vesentlig,men det er også nyttig for å justere for mindre endringer.For eksempel, mellom store stoppunkter kan det være nyttig å justere margene eller polstring på et element,eller øke skriftstørrelsen for å gjøre det føles mer naturlig i oppsettet.

Let ‘ s start med å optimalisere liten skjerm-layout.,I dette tilfellet, la»s boost skriften når viewport bredden er større enn 360px.For det andre, når det ikke er nok plass,kan vi skille de høye og lave temperaturer, slik at de»re på samme lineinstead av på toppen av hverandre.Og let ‘ s også gjøre været ikoner litt større.

på samme måte, for store skjermer det er best å begrense maksimal bredde på prognosen panelso det doesn»t forbruke hele skjermbredden.,

Optimalisere tekst for lesing #

Klassisk lesbarhet teorien tilsier at en ideell kolonnen skal inneholde 70 til 80 tegn per linje(ca 8 til 10 ord på engelsk).Dermed, hver gang bredden av en tekstblokk vokser siste ca 10 ord,bør du vurdere å legge til et stoppunkt.

La ‘ s ta en dypere titt på over blogginnlegg eksempel.På mindre skjermer, Roboto skrift på 1em fungerer perfekt å gi 10 ord per linje,men større skjermer krever et stoppunkt.I dette tilfellet, hvis nettleseren bredden er større enn 575px, ideelt innhold bredde er 550px.,

Unngå bare å skjule innholdet #

Vær forsiktig når du velger hvilket innhold for å skjule eller vise avhengig av skjermstørrelse.Don»t rett og slett skjule innhold bare fordi du kan»t monter den på skjermen.Skjermstørrelsen er ikke en definitiv indikasjon på hva en bruker kan være lurt.For eksempel, å eliminere pollen tell fra været forecastcould være et alvorlig problem for spring-tid allergikere som trenger informationto finne ut om de kan gå utenfor eller ikke.,

Vise media query stoppunkter i Chrome DevTools #

Når du»har fått din media query stoppunkter sette opp,du»ll ønsker å se hvordan siden din ser ut med dem.Du kan endre størrelsen på nettleservinduet for å utløse brytningspunkter,men Chrome DevTools har en innebygd funksjon som gjør det lett å se hvordan en side looksunder forskjellige stoppunkter.

for Å vise din side under forskjellige stoppunkter:

Åpne DevToolsand slå deretter på Enheten Modus.Dette åpner i mottakelig modus som standard.

for Å se din media queries, åpne Enheten på Modus-meny og velg vis media queriesto vise stoppunkter som stolper over din side.

Klikk på en av barene for å vise din side mens du at media query er aktiv.,Høyre-klikk på en bar for å hoppe til media query»s definisjon.

---