3. Responsiva sidor

Till nästa tar vi och lär oss göra sidan så att den anpassar sig efter bredden på användarens browser.

Flexbox

Flexbox är ett verktyg med vars hjälp du placerar div element så att de är responsiva på webbsidan. Elementen som du vill att är responsiva placerar du i en behållare där Flexbox är aktiverat.

En enkel användning av Flexbox där tre div-element placeras bredvid varanda så att avståndet mellan elementen är jämt ser du nedan. Först som HTML:

Sedan som CSS. Märk koden i .container elementet.

Och till sist slutresultatet.

Tag gärna och skriv av koden och testa på att ändra bredden för browsern eller klicka här så får du sidan i en ny flik.

En bra luntlapp för hur man jobbar med Flexbox hittar du här.

@media

Med @media kan du ända på hur webbsidans innehåll beter sig baserat på bredden för browsern. Du kan gömma eller visa element. Du kan också göra en hel del annat, men vi klarar oss långt med det.

Vi utnyttjar förra sidan och ändrar på koden så att vi har två olika menyer som syns beroende på sidbredden. Den under class="menu" är för smalare skärmar och class="container" är för bredare skärmar.

Sedan som CSS. Märk koden i .menu elementet och koden i slutet under @media. Med display: kan vi bestämma om något visas eller inte.

Och till sist slutresultatet.

och

Tag gärna och skriv av koden och testa på att ändra bredden för browsern eller klicka här så får du sidan i en ny flik.

För att få reda på bredden för sidan så måste du jobba med Firefox eller Chrome. Högerklicka på sidan och välj Inspektera. En bra referens för skärmas bredd hittar du här.