Responsive webdesign - Media queries

Wat is een media query?

Media queries zijn een CSS-technologie die is geïntroduceerd in CSS3.

Gebruikt het alleen wanneer bepaalde voorwaarden worden voldaan @media Regels om CSS-eigenschapsblokken te refereren.

Voorbeeld

Als het browservenster 600px of kleiner is, is de achtergrondkleur lichte blauw:

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Probeer het zelf

Voeg een schermbreukpunt toe

In een eerdere fase van deze tutorial hebben we een webpagina gemaakt met rijen en kolommen, maar deze responsive webpagina ziet er niet goed uit op kleine schermen.

Media queries kunnen u helpen. We kunnen een schermbreukpunt toevoegen waarbij bepaalde delen van het ontwerp aan de ene en andere kant van het schermbreukpunt verschillend gedragen.


Desktop computer

Mobiele telefoon

Voeg een schermbreukpunt toe op 768px met behulp van media queries:

Voorbeeld

Wanneer het scherm (browservenster) kleiner is dan 768px, moet de breedte van elke kolom 100% zijn:

/* Voor desktop apparaten: */
.col-1 {breedte: 8.33%;}
.col-2 {breedte: 16.66%;}
.col-3 {breedte: 25%;}
.col-4 {breedte: 33.33%;}
.col-5 {breedte: 41.66%;}
.col-6 {breedte: 50%;}
.col-7 {breedte: 58.33%;}
.col-8 {breedte: 66.66%;}
.col-9 {breedte: 75%;}
.col-10 {breedte: 83.33%;}
.col-11 {breedte: 91.66%;}
.col-12 {breedte: 100%;}
@media only screen and (max-width: 768px) {
  /* Voor mobiele telefoons: */
  [class*="col-"] {
    breedte: 100%;
  }
}

Probeer het zelf

Altijd Mobile First ontwerp

Mobile First (Mobile First) betekent dat we voor het ontwerpen van desktops of andere apparaten, prioriteit geven aan het ontwerpen voor mobiele apparaten (wat ervoor zorgt dat de pagina sneller wordt weergegeven op kleinere apparaten).

Dit betekent dat we enkele verbeteringen in CSS moeten aanbrengen.

Wanneer de breedte kleiner is dan 768px, moeten we het ontwerp aanpassen in plaats van de breedte te wijzigen. We hebben zo een 'mobile first' ontwerp gevolgd:

Voorbeeld

/* Voor mobiele telefoons: */
[class*="col-"] {
  breedte: 100%;
}
@media only screen and (min-width: 768px) {
  /* Voor desktop: */
  .col-1 {breedte: 8.33%;}
  .col-2 {breedte: 16.66%;}
  .col-3 {breedte: 25%;}
  .col-4 {breedte: 33.33%;}
  .col-5 {breedte: 41.66%;}
  .col-6 {breedte: 50%;}
  .col-7 {breedte: 58.33%;}
  .col-8 {breedte: 66.66%;}
  .col-9 {breedte: 75%;}
  .col-10 {breedte: 83.33%;}
  .col-11 {breedte: 91.66%;}
  .col-12 {breedte: 100%;}
}

Probeer het zelf

Een andere schermbreukpunt

U kunt zoveel schermbreukpunten toevoegen als u wilt.

We zullen ook een schermbreedtebreuk invoegen tussen tablet en mobiele telefoon.


Desktop computer

Tablet

Mobiele telefoon

Daarom hebben we een media query toegevoegd (bij 600 pixels) en een nieuwe set klassen toegevoegd voor apparaten met een schermresolutie groter dan 600 pixels, maar kleiner dan 768 pixels:

Voorbeeld

Let op, de twee sets van klassen zijn bijna identiek, de enige verschil is de naam (col- en col-s-):

/* Voor mobiele telefoons: */
[class*="col-"] {
  breedte: 100%;
}
@media only screen and (min-width: 600px) {
  /* Voor tabletten: */
  .col-s-1 {breedte: 8.33%;}
  .col-s-2 {breedte: 16.66%;}
  .col-s-3 {breedte: 25%;}
  .col-s-4 {breedte: 33.33%;}
  .col-s-5 {breedte: 41.66%;}
  .col-s-6 {breedte: 50%;}
  .col-s-7 {breedte: 58.33%;}
  .col-s-8 {breedte: 66.66%;}
  .col-s-9 {breedte: 75%;}
  .col-s-10 {breedte: 83.33%;}
  .col-s-11 {breedte: 91.66%;}
  .col-s-12 {breedte: 100%;}
}
@media only screen and (min-width: 768px) {
  /* Voor desktop: */
  .col-1 {breedte: 8.33%;}
  .col-2 {breedte: 16.66%;}
  .col-3 {breedte: 25%;}
  .col-4 {breedte: 33.33%;}
  .col-5 {breedte: 41.66%;}
  .col-6 {breedte: 50%;}
  .col-7 {breedte: 58.33%;}
  .col-8 {breedte: 66.66%;}
  .col-9 {breedte: 75%;}
  .col-10 {breedte: 83.33%;}
  .col-11 {breedte: 91.66%;}
  .col-12 {breedte: 100%;}
}

Twee sets van dezelfde klassen lijkt vreemd, maar het geeft ons de kans om met HTML te beslissen wat er met de kolommen gebeurt op elke schermbreedte:

HTML voorbeeld

Voor desktops:

Het eerste en derde deel overschrijden beide 3 kolommen. Het midden deel overschrijdt 6 kolommen.

Voor tabletten:

Het eerste deel overschrijdt 3 kolommen, het tweede deel overschrijdt 9 kolommen, het derde deel wordt weergegeven onder de eerste twee delen en overschrijdt 12 kolommen:

<div class="row">
  <div class="col-3 col-s-3">...</div>
  <div class="col-6 col-s-9">...</div>
  <div class="col-3 col-s-12">...</div>
</div>

Probeer het zelf

Typische apparaatbreakpoints

Er zijn talloze schermen en apparaten met verschillende hoogte en breedte, dus het is moeilijk om een exacte break-point voor elk apparaat te maken. Voor het gemak kunt u deze vijf groepen richten:

Voorbeeld

/* Ultrakleine apparaten (telefoons, 600px en lager) */
@media only screen and (max-width: 600px) {...} 
/* Kleine apparaten (verticale tablets en grote smartphones, 600 pixels en hoger) */
@media only screen and (min-width: 600px) {...} 
/* Middelgrote apparaten (horizontale tablets, 768 pixels en hoger) */
@media only screen and (min-width: 768px) {...} 
/* Grote apparaten (laptops/desktops, 992px en hoger) */
@media only screen and (min-width: 992px) {...} 
/* Uitgebreide apparaten (grote laptops en desktops, 1200px en hoger) */
@media only screen and (min-width: 1200px) {...}

Probeer het zelf

Richting: Portret / Landschap

Media queries kunnen ook worden gebruikt om de lay-out van de pagina te wijzigen op basis van de richting van de browser.

U kunt een set CSS-eigenschappen instellen die alleen van toepassing zijn als de breedte van het browservenster groter is dan de hoogte, wat bekend staat als 'landscape'-richting:

Voorbeeld

Als de richting landschapsmodus is, wordt de achtergrond van de pagina lichte blauw:

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Probeer het zelf

Elementen verbergen met media query

Een andere veelvoorkomende toepassing van media queries is het verbergen van elementen op verschillende schermformaten:

Voorbeeld

/* Als het schermformaat 600 pixels of kleiner is, verberg dan dit element */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

Probeer het zelf

Lettergrootte wijzigen met media query

U kunt ook media queries gebruiken om de lettergrootte van elementen op verschillende schermformaten te wijzigen:

Voorbeeld

/* Als het schermformaat 601px of groter is, stel dan de font-size van <div> in op 80px */
@media only screen and (min-width: 601px) {}}
  div.example {
    font-size: 80px;
  }
}
/* Als het schermformaat 600px of kleiner is, stel de font-size van <div> in op 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

Probeer het zelf

CSS @media referentiehandleiding

Voor een volledige overzicht van alle media types en eigenschappen/expressies, raadpleeg Bekijk @media regel in de CSS referentiehandleiding.