Hoe werkt responsive design technisch?

Uit vier onderdelen.

De viewport-instelling. Eén regel in de head van je pagina die de browser vertelt dat hij de site op de werkelijke schermbreedte moet tonen in plaats van in te zoomen op een desktopversie. Ontbreekt die regel, dan is niets anders wat je doet nog van belang.

Een flexibele indeling. Breedtes in procenten of in moderne CSS-eenheden in plaats van in vaste pixels, zodat blokken meebewegen. CSS Grid en Flexbox doen dit werk tegenwoordig grotendeels vanzelf.

Media queries. Regels in de CSS die zeggen: vanaf deze schermbreedte geldt een andere indeling. Dat is het moment waarop drie kolommen er één worden.

Flexibele afbeeldingen. Met srcset lever je per schermformaat een andere bestandsgrootte aan, zodat een telefoon niet de desktopversie van je foto binnenhaalt.

Nieuwer en inmiddels breed ondersteund zijn container queries. Daarmee reageert een component op de ruimte die hij zelf krijgt in plaats van op de breedte van het hele scherm. Dat is preciezer, vooral bij componenten die op meerdere plekken in een pagina terugkomen.