Inleiding tot lay-out voor verschillende schermen in CSS

In de moderne wereld moet een website er goed uitzien op apparaten met verschillende schermafmetingen.

Over het algemeen worden apparaten in vier klassen ingedeeld: computers (desktop), laptops, tablets (tablet) en telefoons (mobile).

Vroeger, in de oude dagen, waren de populaire schermafmetingen van alle apparaten bekend, gelukkig waren er niet zo veel. En websites werden gemaakt zodat ze correct werden weergegeven op de bekende lijst van resoluties.

Tegenwoordig zijn er zoveel apparaten, dat het onmogelijk is om een lijst met resoluties op te stellen waarvoor een website gemaakt moet worden. Tegenwoordig wordt aangenomen dat de lay-out correct moet worden weergegeven op een scherm van elke afmeting.

Dit wordt bereikt door blokken te herschikken bij de key lay-out breakpoints. En deze key points worden niet gekozen voor specifieke apparaten, maar voor de inhoud van de site - zodat het er goed uitziet.

Tussen de key points in moet de breedte van de elementen van de site vloeiend zijn, zodat deze zich aanpast aan de schermbreedte. En bij de key points vindt herschikking van blokken naar andere posities plaats.

De beschreven lay-out wordt adaptieve of responsieve (responsive) lay-out genoemd. Hiermee gaan we ons bezighouden in de volgende lessen.