Introduksjon til tilpasning av layout for ulike skjermer i CSS

I den moderne verden må et nettsted vises godt på enheter med ulik skjermstørrelse.

Vanligvis deles enheter inn i fire klasser: stasjonære PC-er (desktop), bærbare PC-er, nettbrett (tablet) og telefoner (mobile).

Tidligere, i de gamle dager, var de populære skjermstørrelsene for alle enheter kjent, og heldigvis var det ikke så mange av dem. Og nettsteder ble laget silk at de ble vist korrekt på en kjent liste over oppløsninger.

I dag er det blitt så mange enheter at det er umulig å lage en liste over oppløsninger som nettstedet må tilpasses. Nå anses det at layouten skal vises korrekt på en skjerm av enhver størrelse.

Dette oppnås ved å omorganisere blokker på layoutens knippunkter. Disse knippunktene velges ikke for bestemte enheter, men for nettstedets innhold - slik at det ser bra ut.

Mellom knippunktene bør bredden på elementene på nettstedet være flytende, slik at den tilpasser seg skjermens bredde. Og ved knippunktene skjer det en omorganisering av blokker til andre posisjoner.

Layouten beskrevet kalles tilpasningsdyktig eller responsiv (responsive). Det er dette vi skal studere i de neste leksjonene.