Responsiv design
En designstrategi där sidans layout anpassas automatiskt till skärmens storlek, oavsett om besökaren använder mobil, surfplatta eller dator.
Responsiv design uppnås primärt via CSS: media queries låter dig tillämpa olika stilar beroende på skärmbredd, flexbox och CSS Grid gör det enkelt att bygga layouter som flödar om naturligt, och relativa enheter som procent och rem skalar med sin omgivning.
Mobile-first är standardansatsen: designa för den minsta skärmen först och lägg sedan till stilar för större skärmar via media queries. Det tvingar fram prioritering av det viktigaste innehållet.
I ett Next.js-projekt skrivs responsiv CSS i CSS Modules precis som i vanliga webbprojekt. Next.js Image-komponenten hjälper med responsiva bilder och genererar automatiskt varianter i olika storlekar för rätt enhet.