HTML & CSS del 7 av 8: Responsiv design – gör plats för mobilen

Kodkunskap är en utbildnings- och fortbildningssida och community för utvecklare. Denna podcast är en del av ett utbildningsmaterial.

🏠 https://www.kodkunskap.se

💬 https://discord.gg/hZfsnpQM

Denna serien handlar om HTML & CSS och detta är avsnittet 7 av 8.

---

Hur ser din webbsida ut på mobilen? Surfplattan? Datorn? I det här avsnittet lär du dig grunderna i responsiv design – alltså hur du bygger webbsidor som automatiskt anpassar sig till olika skärmstorlekar och enheter.

Vi går igenom:

• Vad responsiv design är och varför det är så viktigt
• Hur du använder viewport-taggen, flexibla mått och enheter som %, em, vw, vh
• Hur du med media queries kan anpassa layout och stil beroende på skärmens bredd
• Tänk “mobile first” – börja enkelt, skala upp
• Ett praktiskt exempel på hur en meny förändras mellan mobil och desktop

Du får verktygen för att skapa webbsidor som inte bara ser bra ut – utan fungerar överallt.

👉 I nästa (och sista) avsnitt tittar vi på nästa steg: hur du publicerar din sida och fortsätter utvecklas som webbutvecklare.

---

Exempel

Meta-tag till huvudet av HTML-dokumentet
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media query
@media (max-width: 600px) {
   .nav {
       flex-direction: column;
   }
}