Introduktion til layout til forskellige skærme i CSS

I den moderne verden skal en hjemmeside vise sig godt på enheder med forskellig skærmstørrelse.

Som regel inddeles enheder i fire klasser: computere (desktop), bærbare computere, tablets (tablet) og telefoner (mobile).

Tidligere, i de gamle dage, kendte man til populære skærmstørrelser for alle enheder, og der var heldigvis ikke så mange af dem. Og hjemmesider blev lavet så de viste korrekt på en kendt liste af opløsninger.

I nutiden er der kommet så mange enheder, at det er umuligt at lave en liste over opløsninger, som hjemmesider skal laves til. I dag anses det for, at layoutet skal vises korrekt på en skærm af enhver størrelse.

Dette opnås ved at ombygge blokke ved layoutets nøglepunkter. Disse nøglepunkter vælges ikke til bestemte enheder, men til hjemmesidens indhold - så det ser godt ud.

Mellem nøglepunkterne bør elementernes bredde på hjemmesiden være flydende, så den tilpasser sig skærmens bredde. Og ved nøglepunkterne sker der en ombygning af blokkene til andre positioner.

Det beskrevne layout kaldes adaptivt eller responsivt (responsive). Det er dette, vi vil studere i de næste lektioner.