Vejledning i responsivt design - Lær responsivt webdesign på 5 minutter

I denne artikel lærer jeg dig så mange responsive designteknikker, som jeg overhovedet kan, på fem minutter. Dette er selvfølgelig ikke nok til at lære det ordentligt, men det giver dig et overblik over de vigtigste begreber, som jeg personligt definerer som disse:

  • Relative CSS-enheder
  • Medieforespørgsler
  • Flexbox
  • Responsiv typografi

Hvis du vil dykke dybere ned i emnet bagefter, kan du tjekke vores responsive webudvikler bootcamp på Scrimba, som gør det muligt for dig at opbygge responsive websteder på et professionelt niveau.

Men nu skal vi starte med det grundlæggende!

Relative CSS-enheder

Kernen i responsivt webdesign er relative CSS-enheder. Dette er enheder, der får deres værdi fra en anden ekstern værdi. Dette er praktisk, fordi det f.eks. Tillader bredden på et billede at være baseret på bredden af ​​browseren.

De mest almindelige er:

  • %
  • em
  • rem
  • vw
  • vh

I denne artikel starter vi med procentenheden %, og så ser vi på remenheden i det sidste afsnit.

Lad os sige, at du har et meget simpelt websted, som dette:

Alt tekst

Dens HTML er bare følgende:

Welcome to my website

Som du kan se fra GIF nedenfor, har vores billede som standard en fast bredde:

Alt tekst

Det er ikke særlig lydhørt, så lad os ændre det til 70 procent i stedet. Vi gør blot følgende:

.myImg { width: 70%; } 

Dette indstiller billedets bredde til 70 procent af bredden på dets overordnede, som er tagget. Da mærket spænder over hele skærmens bredde, vil billedet altid være 70 procent af selve skærmen.

Her er resultatet:

Alt tekst

Og det er så let det er at skabe et lydhørt billede!

Brug af medieforespørgsler til at forbedre mobiloplevelsen

Vi har dog et problem med vores responsive layout, hvilket er, at det ser underligt ud på meget små skærme. Bredden på 70% skal indsnævres, når den ses på mobilen. Bare se efter dig selv:

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s>

Alt tekst

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s>

At få det til at se bedre ud i denne situation er en perfekt opgave for medieforespørgsler. De giver dig mulighed for at anvende forskellige stylinger baseret på for eksempel bredden på skærmen. Vi kan stort set sige, at hvis skærmen er mindre end 768 px bred, skal du bruge en anden styling.

Sådan opretter vi en medieforespørgsel i CSS:

@media (max-width: 768px) { .myImage { width: 100% } } 

Denne CSS-blok anvendes kun, hvis skærmens bredde er mindre end 768 pixels.

Her er resultatet:

Alt tekst

Som du kan se, har siden et brudpunkt, hvor billedet pludselig bliver bredere. Det er da browseren er 768 pixels bred, og billedet skifter mellem 70%og 100%.

Brug af Flexbox til navbar

Dernæst er Flexbox. Du kan simpelthen ikke lære om lydhørhed uden at lære om Flexbox. Det ændrede det responsive designspil, da det blev introduceret for et par år siden, da det gør det meget nemmere at placere elementer responsivt langs en akse.

For at udnytte Flexbox gør vi vores side lidt mere kompleks ved at tilføje en navbar over titlen. Her er HTML til det:

 Home About me Contact  

Som standard ser det simpelthen sådan ud.

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s>

Alt tekst

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s>

Vores navigationselementer er alle klemt ind i venstre side, hvilket ikke er det, vi ønsker. Vi ønsker, at de skal fordeles jævnt på hele siden.

For at opnå dette skal vi blot omdanne nav-containeren til en flexbox og derefter bruge den magiske justify-contentegenskab.

nav { display: flex; justify-content: space-around; } 

Det display: flexbliver til en fleksibel boks, og den justify-content: space-aroundfortæller browseren, at elementerne i den fleksible boks skal have plads omkring dem. Så browseren fordeler al resterende plads ligeligt omkring de tre emner.

Sådan ser det ud. Og som du vil bemærke, skaleres det pænt:

Alt tekst

</s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s> </s>

Responsiv typografi: rem

Det sidste trin er også at gøre vores typografi lydhør. Ser du, jeg vil have navlinjen og titlen til at krympe en smule, når skærmen er mindre end 768 pixels bred (vores medieforespørgsels brudpunkt, husker du?).

En måde at gøre dette på ville være at formindske alle skriftstørrelser i medieforespørgslen, som denne:

@media (max-width: 768px) { nav { font-size: 14px; } h1 { font-size: 28px; } } 

Dette er dog ikke ideelt. Vi ender muligvis med flere breakpoints i appen og har også flere elementer (h2, h3, afsnit osv.). Som et resultat bliver vi nødt til at holde styr på alle elementerne i alle de forskellige breakpoints. Det bliver et rod!

Men sandsynligvis vil de forholde sig til hinanden på nogenlunde samme måde gennem de forskellige brudpunkter. For eksempel vil den h1altid være større end paragraph.

Så hvad hvis der var en måde, hvorpå jeg kunne justere en faktor og derefter få resten af ​​skriftstørrelserne til at skalere i forhold til den faktor?

Indtast remser!

A remer dybest set dette: den skriftstørrelsesværdi, du har indstillet til dit element. Liks dette:

html { font-size: 14px; } 

Så i dette dokument er en remlig med 14 pixel.

Det betyder, at vi kan indstille alle vores skrifttypestørrelser på vores hjemmeside i remenheder som denne:

h1 { font-size: 2rem; } nav { font-size: 1rem; } 

Og så ændrer vi simpelthen fontstørrelsesværdien for tagget i vores medieforespørgsel. Dette vil sikre, at skriftstørrelsen for vores h1og   navelementer også ændres.

Sådan ændrer vi vores remværdi i en medieforespørgsel:

@media (max-width: 768px) { html { font-size: 14px } } 

Og ligesom det har vi også et brudpunkt for alle vores skrifttypestørrelser. Bemærk, hvordan skriftstørrelsen ændres, når siden krydser 768-pixel-mærket:

Alt tekst

Det har kun været fem minutter, men nu har du faktisk lært at lave skriftstørrelser, billeder og navbar-elementer for at svare på sidens bredde. Det er ret godt, og du har taget dine første skridt mod at lære de meget værdifulde færdigheder i at opbygge responsive websteder.

Hvis du er interesseret i at fortsætte denne læringsrejse, vil jeg anbefale dig at kigge på vores massive Scrimba-kursus om emnet! Det undervises af en af ​​YouTubes mest populære lærere om emnet, og det tager dig til et professionelt niveau inden for responsivt webdesign.

Glad kodning :)

Tak for læsningen! Mit navn er Per Borgen, jeg er medstifter af Scrimba - den nemmeste måde at lære at kode på. Du bør tjekke vores responsive webdesign bootcamp, hvis du vil lære at opbygge et moderne websted på et professionelt niveau.