12. Media Queries

Media Queries

WEB ESSENTIALS

Responsiveness

Responsiveness betekent dat een website zich aanpast aan het schermformaat en apparaat van de gebruiker, bijv. smartphone, tablet, laptop of groot scherm.

Responsiveness

Op élk schermformaat moeten we een goede gebruikerservaring creëren en het design optimaliseren.

Responsiveness

Zaken die je vaak moet aanpassen bij verschillende schermgroottes:

Fontgrootte: groter op desktop, kleiner op mobile
Spacing: meer ruimte op desktop, minder op mobile
Layout: Horizontale structuren op desktop, verticaal op mobile
Naivagtie: Navbar op desktop, hamburger menu bij mobile
Afbeeldingen: grotere resoluties op desktop, kleiner bij mobile
...

Responsiveness in de inspector

Met de inspector kan je jouw website op verschillende schermgroottes en toestellen uittesten.

Open de inspector en klik op het icoon in de topbar
In de aangepaste interface kan je nu een toestel kiezen

Mobile first

Bij het eerste deel van de eindopdracht maakte je een mobile website, dat is niet toevallig. Zowel bij design als bij development loont het om eerst de mobile versie te maken.

Je focust automatisch meer op de essentiële inhoud
Eerst de basisstructuur en het design goed zetten zonder onnodige complexiteit.
Wanneer je meer ruimte hebt (bijv. op tablet of desktop), kunnen complexere layouts en extra design elementen worden toegevoegd.

👉 Mobile first = meer focus op gebruiksvriendelijkheid

Media queries

Media Queries

Media queries gebruik je om op verschillende schermgroottes verschillende CSS code in te laden. Zo kan je de styling aanpassen voor verschillende schermgroottes.

@media (min-width: 40rem) {
  h1 {
    font-size: 2rem;
  }
}

@media (min-width: 60rem) {
  h1 {
    font-size: 2.4rem;
  }
}

Media Queries

Media queries werken conditioneel. Ze geven de browser een voorwaarde:

"Als het scherm deze schermgrootte heeft, dan moet je de volgende code gebruiken"

@media (min-width: 40rem) {
  h1 {
    font-size: 2rem;
  }
}

@media (min-width: 60rem) {
  h1 {
    font-size: 2.4rem;
  }
}

Opbouw media query

Voorwaarde

"Als..."

@media (min-width: 40rem) {
  h1 {
    font-size: 2rem;
  }
}

@media (min-width: 60rem) {
  h1 {
    font-size: 2.4rem;
  }
}

Opbouw media query

Wat uitgevoerd moet worden als de voorwaarde klopt

"Dan..."

@media (min-width: 40rem) {
  h1 {
    font-size: 2rem;
  }
}

@media (min-width: 60rem) {
  h1 {
    font-size: 2.4rem;
  }
}

Min-width

We gebruiken als voorwaarde de property min-width, omdat we dan beter mobile-first kunnen werken.

Min-width: vanaf deze grootte (en groter)

@media (min-width: 40rem) {
/*Wanneer het scherm minstens 40rem breed of breder is, wordt deze code gebruikt*/

  h1 {
    font-size: 2rem;
  }
}

⚠️ Let op

Bij online voorbeelden vind je soms media queries die gebruik maken van max-width, dit maakt het echter complex. Gebruik enkel min-width.

Mobile first

We gebruiken het mobile first principe om onze code te schrijven:

Schrijf eerst code voor het kleinste scherm (en bekijk je website ook eerst enkel op mobile formaat)
Daarna schalen we het scherm telkens groter en voegen we waar nodig media queries toe
Je kan zoveel media queries toevoegen als nodig, maar meestal werken we met twee à drie media queries = breakpoints

Mobile first

h1 {
  font-size: 1.8rem
}

@media (min-width: 40rem) {
  h1 {
    font-size: 2rem;
  }
}

@media (min-width: 60rem) {
  h1 {
    font-size: 2.4rem;
  }
}

code voor mobile

code voor tablet

code voor desktop