Responsiv design

Responsiv design handler om å lage nettsider som fungerer på alle skjermstørrelser. I stedet for å bygge separate versjoner for mobil og desktop, bruker du CSS-teknikker som tilpasser layouten automatisk basert på tilgjengelig plass.

Her lærer du prinsippene bak responsiv design, hvordan du bygger responsive layouter med et kolonnesystem, gjør bilder fleksible med max-width og object-fit, bruker media queries for å tilpasse design ved ulike breakpoints, og skalerer typografi med relative enheter og clamp.

Artikler

Responsiv design i CSS forklart

Lær hva responsiv design er og de grunnleggende prinsippene. Viewport, mobile-first og fleksible layouts forklart med gratis video.

Slik lager du en responsiv layout med CSS

Lær å bygge layouts som tilpasser seg skjermstørrelsen med CSS. Gratis video som viser responsive teknikker steg for steg.

Responsive bilder i CSS

Lær å gjøre bilder responsive med CSS slik at de tilpasser seg ulike skjermstørrelser. Max-width, object-fit og beste praksis.

Media queries i CSS forklart

Lær å bruke media queries i CSS for å tilpasse design til ulike skjermstørrelser. Breakpoints, syntaks og mobile-first forklart.

Responsiv typografi i CSS

Lær å skalere tekststørrelser med CSS for ulike skjermstørrelser. Relative enheter, clamp og responsive fontstørrelser forklart.

Få tilgang til alt

Få tilgang til alle nettkurs

Ubegrenset kurstilgang. Fra 599,-/mnd.