NemProgrammering.dk logo
3 måneders gratis webhotel til alle NemProgrammering.dk brugere! Få din UnoEuro Rabatkode her
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 spørgsmål eller kommentarer? Så skriv herunder! Alternativt kan du kontakte os på vores forum, hvor en masse hjælpsomme personer sidder klar ved tasterne.

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

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