Sådan bruger du media queries | Responsive design kursus
NemProgrammering.dk logo
Læs mere om denne UnoEuro Rabatkode
UnoEuro rabatkode

Sådan anvender du media queries

Lad NemProgrammering.dk´s eksperter lave din hjemmeside for dig
Vi tilbyder professionel hjælp til udvikling af hjemmesider og webshops. Læs mere om vores ydelser her!

Information om denne video

Underviser: Zaki Wasik

Download kildefiler Download kildefiler
Anvend CodePen 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:

Denne video relaterer til emner såsom: responsive design kursus, responsive design tutorial, respsonsiv web-design vejledning, responsive hjemmeside design for begyndere, forskellen på adaptive layouts, Responsive layouts og mobile sites, media queries

Spørgsmål og kommentarer

Har du et spørgsmål eller en kommentar til denne video/artikel? Så skriv herunder! Alternativt kan du kontakte os på vores forum, hvor en masse hjælpsomme personer sidder klar til at hjælpe.

Url´er bliver automatisk omdannet til links (nofollow).

Vær den første til at skrive en kommentar!