Responsive Web design basics (Svenska)

• Ställ in visningsområdet
• storlek innehåll till visningsområdet
• använd css media frågor för lyhördhet
• hur man väljer brytpunkter
• Visa media fråga brytpunkter i Chrome DevTools

användningen av mobila enheter för att surfa på webben fortsätter att växa i en astronomisk takt, och dessa enheter är ofta begränsas av visningsstorlek och kräver en annan inställning till hur innehållet utlagd på skärmen.,

responsiv webbdesign, ursprungligen definierad av Ethan Marcotte i en lista från varandra, svarar på användarnas behov och de enheter de använder. Layouten ändras baserat på enhetens storlek och kapacitet. Till exempel, på en telefon användare skulle se innehåll som visas i en enda kolumn vy; en tablett kan visa samma innehåll i två kolumner.

en mängd olika skärmstorlekar finns över telefoner, ”phablets”, tabletter, stationära datorer, spelkonsoler, TV-apparater och till och med bärbara datorer., Skärmstorlekar förändras alltid, så det är viktigt att din webbplats kan anpassa sig till vilken skärmstorlek som helst, idag eller i framtiden. Dessutom har enheter olika funktioner som vi interagerar med dem. Till exempel kommer några av dina besökare att använda en pekskärm. Modern lyhörd design anser alla dessa saker för att optimera upplevelsen för alla.

Ställ in viewport #

sidor som är optimerade för en mängd olika enheter måste innehålla en meta viewport-Tagg i dokumentets huvud.En Meta viewport-Tagg ger webbläsarens instruktioner om hur man styr sidan”s dimensioner och skalning.,

för att försöka ge den bästa upplevelsen, mobila webbläsare rendersidan på en skrivbordsskärmsbredd (vanligtvis om 980px, även om denna sortacross enheter), och sedan försöka göra innehållet ser bättre genom att ökafont storlekar och skala innehållet för att passa skärmen.Detta innebär att teckenstorlekar kan verka inkonsekventa för användare, som kan behöva dubbeltryck eller nypa-till-zoomin för att se och interagera med innehållet.,

använda meta-visningsvärdetwidth=device-width instruerar sidan att matcha skärmens bredd i enhetsoberoende pixlar. En enhet (eller densitet) oberoende pixel är en representation av en enda pixel, som kan på en skärm med hög densitet består av många fysiska pixlar. Detta gör det möjligt för sidan att reflowcontent att matcha olika skärmstorlekar, oavsett om de görs på en liten mobiltelefon eller en stor stationär bildskärm.,

vissa webbläsarehåller sidans bredd konstant när den roterar till landscapemode och zoomar istället för att reflow för att fylla skärmen., Lägga till värdetinitial-scale=1 instruerar webbläsare att upprätta en 1:1 relation mellan Csspixlar och enhetsoberoende pixlar oavsett enhetsorientering, ochtillåter sidan att dra nytta av hela landskapet bredd.

den har inte en<meta name="viewport"> tagg medwidth ellerinitial-scaleLighthouse audit kan hjälpa dig att automatisera processen att se till att dina HTML-dokument använder visnings metataggen korrekt.,

säkerställa en tillgänglig visnings #

förutom att ställa in en initial-scalekan du också ställa in följande attribut på visningsområdet:

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

När det är inställt kan dessa inaktivera användarens möjlighet att zooma visningsområdet,vilket potentiellt kan orsaka tillgänglighetsproblem.Därför rekommenderar vi inte att du använder dessa attribut.,

storlek innehåll till visnings #

på både stationära och mobila enheter,användare används för att rulla webbplatser vertikalt men inte horisontellt;tvingar användaren att rulla horisontellt eller för att zooma utför att se hela sidan resulterar i en dålig användarupplevelse.

När du utvecklar en mobil webbplats med en Meta viewport-Tagg är det lätt att oavsiktligt skapa sidinnehåll som inte passar in i den angivna visningsområdet.Till exempel en bild som visas med en bredd som är bredare än visningenkan orsaka att visningsområdet rullar horisontellt.,Du bör justera innehållet så att det passar inom visningsområdets bredd, så att användaren inte behöver rulla horisontellt.

innehållet är inte korrekt dimensionerat för viewportLighthouse-revisionen kan hjälpa dig att automatisera processen att upptäcka överflödande innehåll.

bilder #

en bild har fasta dimensioner och om den är större än visningsområdet kommer det att orsaka en rullningslist.Ett vanligt sätt att hantera detta problem är att ge alla bilder en max-widthav100%.,Detta gör att bilden krymper för att passa det utrymme den har, om visningsstorleken är mindre än bilden.Men eftersom max-width, snarare än width 100%,kommer bilden inte att stretcha större än dess naturliga storlek.Det är i allmänhet säkert att lägga till följande till din stylesheetso att du aldrig kommer att ha problem med bilder som orsakar en rullningslist.,

Lägg till bildens dimensioner i img-elementet #

När du användermax-width: 100% åsidosätter du bildens naturliga dimensioner,men du bör fortfarande användawidth ochheight attribut på dina<img> – taggen.Detta beror på att moderna webbläsare kommer att använda denna information för att reservera utrymme för bildeninnan den laddas in, kommer detta att bidra till att undvika layoutskift som innehållsbelastningar.,

Layout #

eftersom skärmdimensioner och bredd i CSS-pixlar varierar kraftigt mellan enheter (till exempel mellan telefoner och surfplattor, och även mellan olika telefoner),bör innehållet inte förlita sig på en viss visningsbredd för att rendera väl.

tidigare krävdes detta inställningselement för att skapa layout i percentages.In exemplet nedan kan du se en layout med två kolumner med flytande element, storlek med pixlar.När visningsområdet blir mindre än kolumnernas totala bredd måste vi rulla horisontellt för att se innehållet.,

genom att använda procentsatser för bredderna förblir kolumnerna alltid en viss procentandel av behållaren.Detta innebär att kolumnerna blir smalare, snarare än att skapa en rullningslist.

moderna CSS-layouttekniker som Flexbox, Grid Layout och Multicolmake skapandet av dessa flexibla nät mycket lättare.,

Flexbox #

denna layoutmetod är idealisk när du har en uppsättning objekt av olika storlekoch du vill att de ska passa bekvämt i en rad eller rader,med mindre objekt som tar mindre utrymme och större får mer utrymme.

i en responsiv design kan du använda Flexbox för att visa objekt som en enda rad, eller insvept på flera rader när det tillgängliga utrymmet minskar.

Läs mer om Flexbox.

CSS-rutnätslayout #

CSS-rutnätslayout gör det möjligt att enkelt skapa flexibla nät.,Om vi betraktar det tidigare flytande exemplet,i stället för att skapa våra kolumner med procentsatser, kan vi använda rutnätslayout och enhetenfr, som representerar en del av det tillgängliga utrymmet i behållaren.

rutnät kan också användas för att skapa vanliga rutnätslayouter,med så många objekt som passar.Antalet tillgängliga spår kommer att minskas som skärmstorleken shrinks.In nedan demo, vi har så många kort som passar på varje rad, med en minsta storlek på 200px.,

Läs mer om CSS-rutnätslayout

layout med flera kolumner #

För vissa typer av layout kan du använda Layout med flera kolumner (Multicol),som kan skapa responsiva antal kolumner med column-width property.In Demon nedan kan du se att kolumner läggs till om det finns utrymme för en annan 200px kolumn.,

Läs mer om Multicol

använd CSS mediafrågor för lyhördhet #

Ibland måste du göra mer omfattande ändringar i layoutenför att stödja en viss skärmstorlek än de tekniker som visas ovan tillåter.Det är här mediefrågor blir användbara.

mediefrågor är enkla filter som kan tillämpas på CSS-format.,De gör det enkelt att ändra stilar baserat på vilka typer av enhet som gör innehållet eller funktionerna i den enheten,till exempel bredd, höjd, orientering, förmåga att sväva och om enheten används som pekskärm.,

för att tillhandahålla olika format för utskrift måste du inrikta dig på en typ av utdata så att du kan inkludera en stilmall med Utskriftsformat enligt följande:

alternativt kan du inkludera Utskriftsformat i din huvudmall med en mediefråga:

för responsiv webbdesign frågar vi vanligtvis funktionerna i devicein för att ge en annan layout för mindre skärmar, eller när vi upptäcker att vår besökare använder en pekskärm.

mediafrågor baserade på visningsstorlek #

mediafrågor gör det möjligt för oss att skapa en lyhörd upplevelsedär specifika stilar tillämpas på små skärmar, stora skärmar och någonstans däremellan.Funktionen vi upptäcker här är därför skärmstorlek, och vi kan testa för följande saker.,

• 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.

mediefrågor baserade på enhetens kapacitet #

Med tanke på utbudet av tillgängliga enheter kan vi inte anta att varje stor enhet är en vanlig stationär datoreller bärbar dator, eller att människor bara använder en pekskärm på en liten enhet.,Med några nyare tillägg till mediafrågor specificationwe kan testa för funktioner som den typ av pekare som används för att interagera med deviceoch om användaren kan sväva över element.

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

prova att visa denna demo på olika enheter,till exempel en vanlig stationär dator och en telefon eller surfplatta.

dessa nyare funktioner har bra stöd i alla moderna webbläsare., Ta reda på mer på MDN-sidorna förhover,any-hover,pekare,any-pekare.

användaany-hover ochany-pointer #

funktionernaany-hover ochany-pointer testa om användaren har kapabilitetenatt sväva, eller använd den typen av pekare även om det inte är det primära sättet som de interagerar med device.Be mycket försiktig när du använder dessa.Att tvinga en användare att byta till en mus när de använder sin pekskärm är inte särskilt vänlig!,any-hoverochany-pointer kan dock vara användbart om det är viktigt att ta reda på vilken typ av enhet en användare har.Till exempel bör en bärbar dator med pekskärm och styrplatta matcha grova och fina pekare,förutom möjligheten att sväva.

hur man väljer brytpunkter #

definiera inte brytpunkter baserat på enhetsklasser.Definiera brytpunkter baserat på specifika enheter, produkter, varumärken eller operativsystem som används idag kan resultera i en underhåll mardröm.,Istället bör innehållet själv bestämma hur layouten anpassar sig till sin behållare.

Välj stora brytpunkter genom att starta små, sedan arbeta upp #

designa innehållet för att passa på en liten skärmstorlek först och expandera sedan skärmen tills en brytpunkt blir nödvändig.Detta gör att du kan optimera brytpunkter baserat på innehålloch behålla det minsta antalet brytpunkter som är möjliga.

Låt oss arbeta igenom exemplet vi såg i början: väderprognosen.Det första steget är att få prognosen att se bra ut på en liten skärm.,

ändra storlek på webbläsaren tills det finns för mycket vitt utrymme mellan elementen, och prognosen ser helt enkelt inte så bra ut.Beslutet är något subjektivt, men över 600px är verkligen för brett.

för att infoga en brytpunkt vid600px, skapa två mediefrågor i slutet av din CSS för komponenten,en att använda när webbläsaren är600px och nedan, och en för när den är bredare än600px.

slutligen, refactor CSS. Inuti mediefrågan för enmax-width av600px,Lägg till CSS som endast är för små skärmar., Inuti mediefrågan för enmin-width av601px Lägg till CSS för större skärmar.

Välj mindre brytpunkter vid behov #

förutom att välja stora brytpunkter när layouten ändras betydligt,är det också bra att justera för mindre ändringar.Till exempel,mellan stora brytpunkter kan det vara bra att justera marginalerna eller stoppning på ett element, eller öka teckenstorleken så att det känns mer naturligt i layouten.

Låt oss börja med att optimera den lilla skärmlayouten.,I det här fallet, låt ”s öka teckensnittet när visningsbredden är större än 360px.För det andra, när det finns tillräckligt med utrymme,kan vi separera de höga och låga temperaturerna så att de”är på samma linjeni stället för ovanpå varandra.Och låt oss också göra väderikonen lite större.

På samma sätt, för de stora skärmarna är det bäst att begränsa till maximal bredd på prognospanelen, så det förbrukar inte hela skärmbredden.,

optimera text för läsning #

klassisk läsbarhetsteori tyder på att en idealisk kolumn ska innehålla 70 till 80 tecken per rad(ca 8 till 10 ord på engelska).Således,varje gång bredden på ett textblock växer förbi ca 10 ord, överväga att lägga till en brytpunkt.

Låt oss ta en djupare titt på ovanstående blogginläggsexempel.På mindre skärmar fungerar Roboto-teckensnittet på 1em perfekt vilket ger 10 ord per rad, men större skärmar kräver en breakpoint.In om webbläsarbredden är större än 575pxär den ideala innehållsbredden550px.,

Undvik att helt enkelt dölja innehåll #

var försiktig när du väljer vilket innehåll som ska döljas eller visas beroende på skärmstorlek.Don ”t helt enkelt dölja innehåll bara för att du inte kan” t passa den på skärmen.Skärmstorlek är inte en definitiv indikation på vad en användare kanske vill.Till exempel eliminerar pollenantalet från väderprognosenkan vara ett allvarligt problem för vårtids allergiker som behöver informationenför att avgöra om de kan gå utanför eller inte.,

Visa brytpunkter för mediefrågor i Chrome DevTools #

När du har konfigurerat dina brytpunkter för mediefrågor vill du se hur din webbplats ser ut med dem.Du kan ändra storlek på webbläsarfönstret för att utlösa brytpunkterna, men Chrome DevTools har en inbyggd funktion som gör det enkelt att se hur en sida ser utunder olika brytpunkter.

för att visa din sida under olika brytpunkter:

Öppna Devtooloch slå sedan på enhetsläget.Detta öppnas som standard i responsivt läge.

för att se dina mediefrågor, öppna menyn enhetsläge och väljshow media queriesto visa dina brytpunkter som färgade staplar ovanför din sida.

klicka på en av staplarna för att visa din sida medan mediefrågan är aktiv.,Högerklicka på en bar för att hoppa till media query”s definition.

---