HTML en CSS leren: Media queries en breekpunten

Media queries

Op de gsm van Walter staan de tafels nu netjes onder elkaar. Op de grote laptop van zijn kleindochter mogen ze naast elkaar. Met een media query geef je elk scherm wat het nodig heeft.

Regels voor een breder scherm

Een media query is een blok CSS dat alleen geldt als de voorwaarde klopt. @media (min-width: 600px) { … } geldt vanaf 600px breed en breder. Zo'n grens heet een breekpunt.

Mobiel eerst schrijf je de regels voor de gsm gewoon, en zet je wat een breder scherm extra krijgt in een media query met min-width. Een regel in de media query overschrijft de gewone, omdat hij later komt.

Verander de breedte onder de pagina: voorbij 600px licht de media query op en springen de tafels naar twee kolommen.

style.css

1.tafels {2  grid-template-columns: 1fr;3}4@media (min-width: 600px) {5  .tafels {6    grid-template-columns: repeat(2, 1fr);7  }8}

repaircafe.example

Probeer het zelf

Op een gsm staan de tafels onder elkaar. Vanaf 600px breed staan er twee naast elkaar, en vanaf 900px vier.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3<head>4  <title>Kapot? Mag Niet!</title>5  <link rel="stylesheet" href="basis.css">6  <link rel="stylesheet" href="style.css">7</head>8<body>9  <header>10    <img src="sleutel.svg" alt="" width="40" height="40">11    <h1>Kapot? Mag Niet!</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="tafels.html">Tafels</a>15      <a href="agenda.html">Agenda</a>16      <a href="aanmelden.html">Aanmelden</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Elke eerste zaterdag van de maand in het parochiehuis van Dendermonde. Breng je kapotte spullen mee: we herstellen ze samen.</p>21    <a class="knop" href="aanmelden.html">Meld je toestel aan</a>22    <section class="tafels">23      <article class="tafel fiets">24        <span class="etiket">Vol</span>25        <h2>Fietsen</h2>26        <p>Een lekke band of een slappe rem? Jef en Marc helpen je.</p>27      </article>28      <article class="tafel elektro">29        <h2>Elektro</h2>30        <p>Lampen, broodroosters en koffiezetapparaten.</p>31      </article>32      <article class="tafel naai">33        <span class="etiket">Nieuw</span>34        <h2>Naaiatelier</h2>35        <p>Een losse naad of een kapotte rits.</p>36      </article>37      <article class="tafel computer">38        <h2>Computers</h2>39        <p>Een trage laptop of een gebarsten scherm.</p>40      </article>41    </section>42  </main>43  <footer>44    <p>Parochiehuis, Kerkstraat 12, 9200 Dendermonde</p>45  </footer>46</body>47</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f4f0e8;5  color: #2a2622;6}7header {8  padding: 12px 16px;9  background: #1f4e5f;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27  max-width: 40rem;28}29.tafels {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.knop {36  display: inline-block;37  margin-top: 12px;38  padding: 10px 18px;39  border-radius: 999px;40  background: #d1495b;41  color: #ffffff;42  font-weight: 700;43  text-decoration: none;44}45/* Een gekleurde rand per tafel en een etiket met een gaatje: alleen voor de sier. */46.tafel {47  padding: 14px 16px 16px;48  border-top: 4px solid #f2a541;49  border-radius: 14px;50  background: #ffffff;51  box-shadow: 0 1px 2px rgb(42 38 34 / 0.08), 0 8px 18px -12px rgb(42 38 34 / 0.35);52}53.tafel h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.tafel p {58  margin: 0;59  color: #5b544c;60}61.fiets {62  border-top-color: #2a9d8f;63}64.elektro {65  border-top-color: #f2a541;66}67.naai {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.etiket {74  display: inline-block;75  margin-bottom: 8px;76  padding: 3px 10px 3px 16px;77  border-radius: 4px 999px 999px 4px;78  background: radial-gradient(circle at 7px 50%, #ffffff 0 2.5px, transparent 3px), #ffd166;79  color: #3d2c00;80  font-size: 0.75rem;81  font-weight: 700;82}83form {84  display: grid;85  gap: 6px;86  max-width: 28rem;87  margin: 16px 0;88}89label {90  margin-top: 8px;91  font-weight: 600;92}93input,94select,95textarea {96  padding: 8px 10px;97  border: 1px solid #b9b0a3;98  border-radius: 8px;99  background: #ffffff;100  color: #2a2622;101  font: inherit;102}103button {104  justify-self: start;105  margin-top: 12px;106  padding: 10px 18px;107  border: 0;108  border-radius: 999px;109  background: #1f4e5f;110  color: #ffffff;111  font: inherit;112  font-weight: 700;113}114footer {115  padding: 12px 16px;116  background: #1f4e5f;117  color: #ffffff;118}

repaircafe.example

Klaar voor meer?

De volledige les heeft 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

Regels voor een breder scherm

Een media query is een blok CSS dat alleen geldt als de voorwaarde klopt. @media (min-width: 600px) { … } geldt vanaf 600px breed en breder. Zo'n grens heet een breekpunt.

Verander de breedte onder de pagina: voorbij 600px licht de media query op en springen de tafels naar twee kolommen.

style.css

1.tafels {2  grid-template-columns: 1fr;3}4@media (min-width: 600px) {5  .tafels {6    grid-template-columns: repeat(2, 1fr);7  }8}

repaircafe.example

Probeer het zelf

Op een gsm staan de tafels onder elkaar. Vanaf 600px breed staan er twee naast elkaar, en vanaf 900px vier.

1/* Jouw CSS komt hier. */

1<!DOCTYPE html>2<html lang="nl">3<head>4  <title>Kapot? Mag Niet!</title>5  <link rel="stylesheet" href="basis.css">6  <link rel="stylesheet" href="style.css">7</head>8<body>9  <header>10    <img src="sleutel.svg" alt="" width="40" height="40">11    <h1>Kapot? Mag Niet!</h1>12    <nav>13      <a href="index.html">Home</a>14      <a href="tafels.html">Tafels</a>15      <a href="agenda.html">Agenda</a>16      <a href="aanmelden.html">Aanmelden</a>17    </nav>18  </header>19  <main>20    <p class="slogan">Elke eerste zaterdag van de maand in het parochiehuis van Dendermonde. Breng je kapotte spullen mee: we herstellen ze samen.</p>21    <a class="knop" href="aanmelden.html">Meld je toestel aan</a>22    <section class="tafels">23      <article class="tafel fiets">24        <span class="etiket">Vol</span>25        <h2>Fietsen</h2>26        <p>Een lekke band of een slappe rem? Jef en Marc helpen je.</p>27      </article>28      <article class="tafel elektro">29        <h2>Elektro</h2>30        <p>Lampen, broodroosters en koffiezetapparaten.</p>31      </article>32      <article class="tafel naai">33        <span class="etiket">Nieuw</span>34        <h2>Naaiatelier</h2>35        <p>Een losse naad of een kapotte rits.</p>36      </article>37      <article class="tafel computer">38        <h2>Computers</h2>39        <p>Een trage laptop of een gebarsten scherm.</p>40      </article>41    </section>42  </main>43  <footer>44    <p>Parochiehuis, Kerkstraat 12, 9200 Dendermonde</p>45  </footer>46</body>47</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f4f0e8;5  color: #2a2622;6}7header {8  padding: 12px 16px;9  background: #1f4e5f;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27  max-width: 40rem;28}29.tafels {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.knop {36  display: inline-block;37  margin-top: 12px;38  padding: 10px 18px;39  border-radius: 999px;40  background: #d1495b;41  color: #ffffff;42  font-weight: 700;43  text-decoration: none;44}45/* Een gekleurde rand per tafel en een etiket met een gaatje: alleen voor de sier. */46.tafel {47  padding: 14px 16px 16px;48  border-top: 4px solid #f2a541;49  border-radius: 14px;50  background: #ffffff;51  box-shadow: 0 1px 2px rgb(42 38 34 / 0.08), 0 8px 18px -12px rgb(42 38 34 / 0.35);52}53.tafel h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.tafel p {58  margin: 0;59  color: #5b544c;60}61.fiets {62  border-top-color: #2a9d8f;63}64.elektro {65  border-top-color: #f2a541;66}67.naai {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.etiket {74  display: inline-block;75  margin-bottom: 8px;76  padding: 3px 10px 3px 16px;77  border-radius: 4px 999px 999px 4px;78  background: radial-gradient(circle at 7px 50%, #ffffff 0 2.5px, transparent 3px), #ffd166;79  color: #3d2c00;80  font-size: 0.75rem;81  font-weight: 700;82}83form {84  display: grid;85  gap: 6px;86  max-width: 28rem;87  margin: 16px 0;88}89label {90  margin-top: 8px;91  font-weight: 600;92}93input,94select,95textarea {96  padding: 8px 10px;97  border: 1px solid #b9b0a3;98  border-radius: 8px;99  background: #ffffff;100  color: #2a2622;101  font: inherit;102}103button {104  justify-self: start;105  margin-top: 12px;106  padding: 10px 18px;107  border: 0;108  border-radius: 999px;109  background: #1f4e5f;110  color: #ffffff;111  font: inherit;112  font-weight: 700;113}114footer {115  padding: 12px 16px;116  background: #1f4e5f;117  color: #ffffff;118}

repaircafe.example