NemProgrammering.dk logo
NemProgrammering.dk Trustpilot

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!

Forum stats

  • 1146 Antal brugere
  • 1611 Antal emner
  • 8069 Antal indlæg

Deltag selv!

Nyt fra vores bloggere

Besøg vores webbureau

WordPress Hjemmeside

Nyheder

  • Lær, hvordan du kommer til tops i Google og får flere kunder med vores nye SEO kursus for begyndere. Læs mere her!
  • Du kan nu lære avanceret WordPress her på siden. Lær at tilpasse dit tema samt udvikle dit eget plugin! Lœs mere...
  • Nu kan du også lære at bruge Photoshop fra bunden! Se med her: Photoshop kursus
  • Du kan ikke drive et velfungerende udviklingsmiljø uden hurtigt bredbånd. Se vores artikel om Billig Bredbånd
  • Vil du blive bedre til Google Sheets? Så kan du med fordel se vores nye Google Sheets kursus!