Responsive nettsider

En responsiv nettside er en nettside hvor innholdet automatisk tilpasses størrelsen på skjermen eller nettleservinduet. Elementene på nettsiden vil automatisk krympes, strekkes eller flyttes for å tilpasse størrelsen de har tilgjengelig. Under er et eksempel på hvordan www.nytimes.com ser ut med forskjellig skjermstørrelser.

PC-versjon

Tablet-versjon

Mobil-versjon

Vanlige skjermstørrelser

Regelverket for universell utforming sier at nettsider skal kunne brukes av alle, og som designere vet vi ikke hva slags skjerm brukerne våre har. Derfor er det viktig at vi lager nettsider som ser bra ut på alle typer skjermer. Les mer om universell utforming og responsivt design på uu.difi.no.

Under kan du se en oversikt over de mest vanlige skjermstørrelsene.

Vanlige skjermstørrelser. Hentet fra freecodecamp.

Responsive nettsider med CSS

% skalerer elementer etter skjermstørrelsen

For at elementer skal skaleres etter størrelsen på skjermen, kan vi bruke enheten % på width. I koden under vil bildene alltid ta 100% av plassen de har fått.

img{
    width: 100%;
}

info

Eksperttips: Det er også mulig å bruke max-width.

I eksemplet under er main 900px i bredden så lenge skjermstørrelsen er stor nok. Hvis skjermstørrelsen er under 900px, vil main skaleres etter skjermen.

main{
    width: 900px;
    max-width: 100%;
}

Media queries

Media queries brukes når CSS-kode bare skal gjelde hvis en spesiell betingelse er oppfylt. Det kan for eksempel være at en grid skal vise fire bilder i bredden på store skjermer, men bare ett bilde i bredden på små.

Skrivemåte

@media (betingelse){
    /* CSS-kode som skal gjelde hvis betingelsen er oppfylt */
}

max- og min-width

Det finnes mange typer media queries og du kan lese om alle på MDN web docs. I IT 1 er vi mest interessert i max-width og min-width, siden disse lar oss lage CSS som kun gjelder for gitte skjermbredder.

/* Minimum bredde, gjelder fra verdi og oppover */
@media (min-width: 1200px) {
  div {
    background-color: yellow;
  }
}

/* Maks bredde, gjelder opp til verdi  */
@media (max-width: 900px) {
  div {
    background-color: blue;
  }
}

Eksempel - Responsiv grid

Vi kan lage en grid responsiv ved å endre antall elementer som vises i bredden.

.grid{
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(4, 1fr);
}
@media(max-width: 900px){
    .grid{
        grid-template-columns: 1fr 1fr 1fr;
    }
}
@media(max-width: 700px){
    .grid{
        grid-template-columns: 1fr 1fr;
    }
}

Koden over gir nettsiden under:

Eksempel - Responsiv navigasjonsbar med flex

For å gjøre en navigasjonsbar responsiv kan vi endre på flex-direction.

nav {
  display: flex;
  justify-content: space-around;
}

@media (max-width: 900px) {
  nav {
    flex-direction: column;
    align-items: center;
  }
}

Eksperttips: Responsiv nettside uten media-query

Hentet fra CSS-tricks.com - A Complete Guide to Grid.

I eksempelet under gjør linjen grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); nettsiden responsiv.

Den gjør at elementene i gridden er det som er minst av 200px og maks 100% av plassen de har fått i gridden. I dette tilfellet betyr det at hvis nettleservinduet er under 200px, tar boksene hele nettleservinduet. repeat og auto-fill gjør at gridden fylles med så mange elementer det er plass til.