Introduktion till layout för olika skärmar i CSS

I den moderna världen måste en webbplats visas korrekt på enheter med olika skärmstorlekar.

Vanligtvis delas enheter in i fyra klasser: datorer (desktop), bärbara datorer, surfplattor (tablet) och telefoner (mobile).

Förr, i gamla tider, fanns det kända populära skärmstorlekar för alla enheter, tack och lov var det inte så många. Och webbplatser skapades så att de visades korrekt på en känd lista över upplösningar.

Numera har antalet enheter blivit så stort att det är omöjligt att skapa en lista över upplösningar som webbplatsen måste anpassas efter. Idag anses det att layouten ska visas korrekt på en skärm av vilken storlek som helst.

Detta uppnås genom att omstrukturera block vid layoutens brytpunkter. Dessa brytpunkter väljs inte för specifika enheter, utan för webbplatsens innehåll - så att det ser bra ut.

Mellan brytpunkterna ska bredden på webbplatsens element var flytande, så att den anpassar sig efter skärmens bredd. Och vid brytpunkterna sker en omstrukturering av blocken till andra positioner.

Den beskrivna layouten kallas adaptiv eller responsiv (responsive). Det är detta vi kommer att studera i kommande lektioner.