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.
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;
}
}
