Information om denne video
Underviser: Zaki Wasik
Download kildefiler
Anvend CodePen
I denne video skal vi kigge på et meget centralt emne indenfor responsivt design, nemlig media queries. Denne lektion forudsætter til en vis grad, at du har set de forgående videoer i serien, og derfor anbefaler vi, at du ser disse, inden du kaster dig over denne video.
Inden vi går i gang med lektionens praktiske øvelse, vil vi i starten af videoen forklare lidt om, hvad media queries egentlig er for noget, og hvad de bruges til når man udvikler hjemmesider. Herefter vil vi i øvelsen bruge en media query til bygge et mobilvenligt layout, som kun vil blive anvendt, når vores hjemmeside bliver vist på små skærme.
Videoen vil også komme ind på det man kalder for et "viewport meta tag", hvilket er et utroligt vigtigt element at have med i sin header ( <head> ), når man udvikler en responsiv hjemmeside.
Det viewport meta tag som anvendes i videoen finder du her:
<meta name="viewport" content="width=device-width, initial-scale=1">
Som altid kan du enten arbejde på hjemmesiden via CodePen, eller hente kildefilerne ovenfor, og udføre øvelsen direkte i din egen editor.
I lektionen anvender vi forskellige metoder og værktøjer (Sass, Codepen og Emmet), som du måske ikke har brugt eller hørt om før. Det kan godt virke lidt overvældende, og derfor har Zaki skrevet en uddybende artikel, som giver dig en lidt blødere introduktion disse emner. Læs den her: Codepen, Sass og Emmet.
Video tags:
