Responsive web design basics (Dansk)

• Indstil vindue
• Størrelsen af indhold til vindue
• Brug CSS media queries for lydhørhed
• Hvordan vælger breakpoints
• Vis medier forespørgsel breakpoints i Chrome DevTools

brug af mobile enheder til at surfe internettet fortsætter med at vokse på en astronomisk tempo, og disse enheder er ofte begrænset af skærm størrelse, og det kræver en anderledes tilgang til, hvordan indhold, der er lagt ud på skærmen.,Responsive Responsiveebdesign, oprindeligt defineret af Ethan Marcotte i en liste fra hinanden, reagerer på brugernes behov og de enheder, de”re bruger. Layoutet ændres baseret på enhedens størrelse og muligheder. For eksempel vil brugere på en telefon se indhold vist i en enkelt kolonnevisning; en tablet viser muligvis det samme indhold i to kolonner.

Et væld af forskellige skærmstørrelser, der eksisterer på tværs af telefoner, “phablets,” tablets, computere, spillekonsoller, Tv, og selv wearables., Skærmstørrelser er altid under forandring, så det”s vigtigt, at dit .ebsted kan tilpasse sig enhver skærmstørrelse, i dag eller i fremtiden. Derudover har enheder forskellige funktioner, som vi interagerer med dem. For eksempel bruger nogle af dine besøgende en berøringsskærm. Moderne lydhør design anser alle disse ting for at optimere oplevelsen for alle.

Indstil vie .port #

sider, der er optimeret til en række enheder, skal indeholde et meta vie .port-tag i hovedet på dokumentet.En meta vie .port tag giver bro .seren instruktioner om, hvordan man styrer siden”S dimensioner og skalering.,

for At forsøge at give den bedste oplevelse, mobile browsere renderthe side på en desktop skærm bredde (normalt omkring 980px, selv om dette variesacross enheder), og derefter forsøge at gøre det indhold, der ser bedre ud af increasingfont størrelser og skalering indholdet til at passe på skærmen.Dette betyder, at skriftstørrelser kan forekomme inkonsekvente for brugere, der muligvis skal dobbeltklikke på eller klemme til zoom for at se og interagere med indholdet.,

ved Hjælp af meta-viewport værdi width=device-width pålægger den side, matchthe skærm”, s bredde i den enhed, uafhængig af pixels. En enhed (eller densitet) uafhængige pixel er en repræsentation af en enkelt pixel, som kan på en høj tæthed skærmen består af mange fysiske pixels. Dette gør det muligt for siden at reflo .content at matche forskellige skærmstørrelser, hvad enten gengives på en lille mobiltelefon eller en stor desktop skærm.,

Nogle browserskeep siden”s bredde konstant, når den roterer at landscapemode, og zoom snarere end reflow til at fylde skærmen., Tilføjelse af værdieninitial-scale=1 pålægger browsere til at etablere et 1:1 forhold mellem CSSpixels og enhed-uafhængig pixels uanset enhed orientering, andallows siden for at drage fordel af den fulde landskab bredde.

De ikke har en <meta name="viewport"> – tag med width eller initial-scaleFyrtårn revision kan hjælpe dig med at automatisere processen for at sikre, at dine HTML-dokumenter ved hjælp af viewport meta tag korrekt.,

Sikre en tilgængelig viewport #

ud over at angive en initial-scale,kan du også angive følgende attributter på vindue:

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

Når det er indstillet, disse kan deaktivere bruger”s evne til at zoome viewport,potentielt forårsager tilgængelighed.Derfor vil vi ikke anbefale at bruge disse attributter.,

Størrelsen indhold til viewport #

På både desktop-og mobile enheder,brugerne er vant til at rulle hjemmesider, lodret, men ikke horisontalt;at tvinge brugeren til at scrolle vandret eller for at zoome outin for at se hele siden resulterer i en dårlig oplevelse.

Når du udvikler en mobil siteebsted med en meta vie .port tag,er det let at uheld oprette sideindhold, der gør ikke”t helt passer inden for den angivne vie .port.For eksempel et billede, der vises med en bredde bredere end visningsporten, kan få visningsporten til at rulle vandret.,Du skal justere dette indhold, så det passer inden for bredden af visningsporten,så brugeren ikke behøver at rulle vandret.

Indholdet er ikke dimensioneret korrekt for vie .portlighthouse revision kan hjælpe dig med at automatisere processen med at opdage overfyldte indhold.

billeder #

et billede har faste dimensioner, og hvis det er større end visningsporten, vil det medføre en rullebjælke.En almindelig måde at håndtere dette problem på er at give alle billeder et max-width af 100%.,Dette vil få billedet til at krympe, så det passer til det rum, det har, hvis visningsportstørrelsen er mindre end billedet.Men fordi max-width, snarere end width er 100%,vil billedet ikke strække større end dets naturlige-størrelse.Det er generelt sikkert at tilføje følgende til din stylesheetso, at du aldrig vil have et problem med billeder, der forårsager en rullebjælke.,

Tilføj dimensioner af billedet til img-element #

Når du bruger max-width: 100% du er tvingende den fysiske dimensioner af billedet,men du skal stadig bruge width og height attributter på din <img> tag.Dette skyldes, at moderne bro .sere vil bruge disse oplysninger til at reservere plads til billedetfør det indlæses,dette vil hjælpe med at undgå layoutskift, når indholdsbelastninger.,

Layout > #

Da skærmen dimensioner og bredde i CSS pixels varierer meget mellem enheder(for eksempel mellem telefoner og tablets, og selv mellem forskellige telefoner),indholdet bør ikke stole på et bestemt vindue bredde til at gøre godt.

tidligere krævede dette indstillingselementer, der bruges til at oprette layout i percentages.In eksemplet nedenfor, kan du se en to-kolonne layout med flød elementer, størrelse ved hjælp af Pi .els.Når visningsporten bliver mindre end kolonnernes samlede bredde, skal vi rulle vandretfor at se indholdet.,

Ved at bruge procenter for bredderne forbliver kolonnerne altid en vis procentdel af beholderen.Dette betyder, at kolonnerne bliver smalere, snarere end at oprette en rullebjælke.

Moderne CSS layout teknikker såsom Flexbox, Grid Layout, og Multicolmake oprettelsen af disse fleksible net meget nemmere.,

fle .bo. #

denne layoutmetode er ideel,når du har et sæt varer af forskellig størrelseog du vil gerne have, at de passer komfortabelt i en række eller rækker, hvor mindre genstande tager mindre plads og større får mere plads.

i et responsivt design kan du bruge fle .bo.til at vise elementer som en enkelt række eller indpakket på flere rækker, når den tilgængelige plads falder.

Læs mere om fle .bo..

CSS Grid Layout #

CSS Grid Layout giver mulighed for ligetil oprettelse af fleksible net.,Hvis vi overvejer det tidligere flydede eksempel, snarere end at oprette vores kolonner med procenter,kunne vi bruge gitterlayout og fr enhed,som repræsenterer en del af den tilgængelige plads i beholderen.

Grid kan også bruges til at oprette regelmæssige gitterlayout,med så mange elementer som vil passe.Antallet af tilgængelige spor vil blive reduceret som skærmstørrelsen shrinks.In nedenstående demo, vi har så mange kort som vil passe på hver række,med en minimumsstørrelse på 200px.,

Læs mere om CSS Grid Layout

Flere-kolonne layout #

For nogle former for layout, du kan bruge Flere-kolonne Layout (Multicol),som kan skabe lydhør antallet af kolonner med column-width ejendommen.I demoen nedenfor, kan du se kolonner, der er tilføjet, hvis der er plads til endnu en 200px kolonne.,

Læs mere om Multicol

brug CSS-medieforespørgsler til lydhørhed #

Nogle gange bliver du nødt til at foretage mere omfattende ændringer i dit layoutfor at understøtte en bestemt skærmstørrelse, end teknikkerne vist ovenfor tillader.Det er her medieforespørgsler bliver nyttige.

medieforespørgsler er enkle filtre, der kan anvendes til CSS-stilarter.,De gør det nemt at ændre stilarter baseret på de typer enheder,der gengiver indholdet, eller funktionerne på den enhed, for eksempel bredde, højde, orientering,evne til at svæve, og om enheden bruges som en berøringsskærm.,

At give forskellige stilarter til udskrivning,skal du målrette en type af output, så du kan omfatte en stylesheet med print styles som følger:

Alternativt, kan du medtage print styles i dit vigtigste stylesheet, som bruger en media query:

For responsive web design, vi er typisk at forespørge funktioner i devicein for at give et andet layout til mindre skærme,eller, når vi opdager, at vores besøgende bruger en touchscreen.

medieforespørgsler baseret på visningsstørrelse #

medieforespørgsler gør det muligt for os at skabe en lydhør oplevelse, hvor specifikke stilarter anvendes på små skærme, store skærme og hvor som helst derimellem.Den funktion,vi registrerer her, er derfor skærmstø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.

medieforespørgsler baseret på enhedskapacitet #

i betragtning af de tilgængelige enheder kan vi ikke antage, at hver stor enhed er en almindelig desktopeller bærbar computer, eller at folk kun bruger en berøringsskærm på en lille enhed.,Med nogle nyere tilføjelser til medieforespørgsler specifikationvi kan teste for funktioner som den type pointer, der bruges til at interagere med enhedenog om brugeren kan holde musepekeren over elementer.

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

så Prøv at se denne demo på forskellige enheder,sådan som en almindelig desktop computer og en telefon eller tablet.

disse nyere funktioner har god support i alle moderne bro .sere., Find ud af mere på MDN-siderne forhover, any-hover,pointer, any-pointer.

Bruger any-hover og any-pointer #

funktioner any-hover og any-pointer test, hvis brugeren har capabilityto hover, eller bruge denne type af pointer, selvom det ikke er den primære måde, de interagerer med deres enhed.Være meget forsigtig, når du bruger disse.At tvinge en bruger til at skifte til en mus, når de bruger deres berøringsskærm, er ikke særlig venlig!,any-hover og any-pointer kan dog være nyttigt, hvis det er vigtigt at finde ud af, hvilken type enhed en bruger har.For eksempel skal en bærbar computer med en berøringsskærm og pegefelt matche Grove og fine peger,ud over evnen til at svæve.

Sådan vælges breakpoints #

Definer ikke breakpoints baseret på enhedsklasser.Definition af breakpoints baseret på specifikke enheder, produkter, mærkenavne,eller operativsystemer, der er i brug i dag kan resultere i en vedligeholdelse mareridt.,I stedet skal selve indholdet bestemme, hvordan layoutet tilpasser sig sin container.

Vælg større breakpoints ved at starte små, og arbejd derefter op #

Design indholdet,så det passer på en lille skærmstørrelse først, og udvid derefter skærmen, indtil et breakpoint bliver nødvendigt.Dette giver dig mulighed for at optimere breakpoints baseret på contentand opretholde det mindst mulige antal breakpoints.

Lad”s arbejde gennem det eksempel, vi så i begyndelsen: vejrudsigten.Det første skridt er at få prognosen til at se godt ud på en lille skærm.,

Dernæst skal du ændre størrelsen på bro .seren, indtil der er for meget hvidt mellemrum mellem elementerne,og prognosen ser simpelthen ikke så godt ud.Beslutningen er noget subjektiv, men over 600px er bestemt for bred.

for At indsætte et stoppunkt i 600px, skal du oprette to medier forespørgsler i slutningen af din CSS for den komponent,du vil bruge, når browseren er 600px og under, og en for, når det er bredere end 600px.

Endelig, refactor CSS. Inde i medier forespørgsel for en max-width af 600pxtilføj CSS, som kun er til små skærme., Inde i medieforespørgslen for enmin-width af 601px Tilføj CSS til større skærme.

Vælg mindre breakpoints,når det er nødvendigt #

ud over at vælge større breakpoints, når layoutet ændres betydeligt, er det også nyttigt at justere for mindre ændringer.For eksempel kan det mellem større breakpoints være nyttigt at justere margenerne eller polstringen på et element eller øge skriftstørrelsen for at få det til at føle sig mere naturligt i layoutet.

Lad”s starte med at optimere den lille skærm layout.,I dette tilfælde, lad”s øge skrifttypen, når vie .port bredde er større end 360px.Sekund, når der er plads nok, vi kan adskille de høje og lave temperaturer, så de”re på samme linje i stedet for oven på hinanden.Og lad ” s også gøre Vejret ikoner lidt større.

tilsvarende, for de store skærme er det bedst at begrænse til maksimal bredde af prognosen panelså det gør ikke”t forbruge hele skærmens bredde.,

Optimere tekst for at læse #

Klassiske læsbarhed teori foreslår, at en ideel kolonne skal indeholde 70 til 80 tegn pr linje(omkring 8 til 10 ord i dansk).Således,hver gang bredden af en tekstblok vokser forbi omkring 10 ord, overveje at tilføje et breakpoint.

lad os tage et dybere kig på ovenstående blogindlæg eksempel.På mindre skærme, den skrifttype Roboto på 1em virker perfekt at give 10 ord per linje,men større skærme kræver et breakpoint.I dette tilfælde, hvis browseren bredde er større end 575px, som er den ideelle indhold bredden er 550px.,

Undgå simpelthen at skjule content #

Vær omhyggelig, når du vælger hvilket indhold, der skal skjules eller vises, afhængigt af skærmstørrelsen.Don”t blot skjule indhold, bare fordi du kan” t passe det på skærmen.Skærmstørrelse er ikke en endelig indikation af, hvad en bruger måtte ønske.For eksempel eliminerer pollenantalet fra vejrudsigtetkunne være et alvorligt problem for allergikere i foråret, der har brug for oplysningerneat afgøre, om de kan gå udenfor eller ej.,

Vis media queryuery breakpoints i Chrome DevTools #

Når du har konfigureret dine media queryuery breakpoints,vil du se, hvordan dit .ebsted ser ud med dem.Du kan ændre størrelsen på dit browservindue for at udløse breakpoints,men Chrome DevTools har en indbygget funktion, der gør det let at se, hvordan en side looksunder forskellige breakpoints.

for at se din side under forskellige breakpoints:

Åbn DevToolsand tænd derefter enhedstilstand.Dette åbnes som standard i lydhør tilstand.hvis du vil se dine medieforespørgsler, skal du åbne menuen enhedstilstand og vælgesho.medieforespørgslerfor at vise dine breakpoints som farvede bjælker over din side.

Klik på en af søjlerne for at se din side, mens den medieforespørgsel er aktiv.,Højreklik på en bjælke for at springe til medierne forespørgslen”s definition.

---