`@media` en Responsive Design
Dit artikel legt @media en responsive design uit.
Je leert hoe je flexibele lay-outs kunt maken met de basis syntax en gebruiksvoorbeelden van @media.
YouTube Video
HTML voor Voorbeeldweergave
css-responsive-media.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-responsive-media.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Responsive Design</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>@media</h2>
20 </header>
21 <article>
22 <h3>@media Syntax</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26@media media-type and (condition) {
27 /* Styles applied when the media query is matched */
28}
29</pre>
30 </section>
31 </article>
32 <article>
33 <h3>@media Example : max-width</h3>
34 <section>
35 <header><h4>CSS</h4></header>
36<pre class="sample">
37@media screen and (max-width: 600px) {
38 body {
39 background-color: lightblue;
40 }
41 p {
42 font-size: 14px;
43 }
44}
45</pre>
46 </section>
47 </article>
48 <article>
49 <h3>@media Example : orientation</h3>
50 <section>
51 <header><h4>CSS</h4></header>
52<pre class="sample">
53@media screen and (orientation: landscape) {
54 body {
55 background-color: lightgreen;
56 }
57}
58</pre>
59 </section>
60 </article>
61 <article>
62 <h3>@media Example : min-width & max-width</h3>
63 <section>
64 <header><h4>CSS</h4></header>
65<pre class="sample">
66@media screen and (min-width: 768px) and (max-width: 1024px) {
67 body {
68 background-color: lightgray;
69 }
70}
71</pre>
72 </section>
73 </article>
74 <article>
75 <h3>@media Example : devices</h3>
76 <section>
77 <header><h4>CSS</h4></header>
78<pre class="sample">
79/* Mobile styles */
80@media screen and (max-width: 600px) {
81 body {
82 font-size: 14px;
83 }
84}
85
86/* Tablet styles */
87@media screen and (min-width: 601px) and (max-width: 1024px) {
88 body {
89 font-size: 16px;
90 }
91}
92
93/* Desktop styles */
94@media screen and (min-width: 1025px) {
95 body {
96 font-size: 18px;
97 }
98}
99</pre>
100 </section>
101 </article>
102 </main>
103</body>
104</html>@media-regels
@media is een regel waarmee CSS-mediaquery's worden gebruikt om stijlen toe te passen op basis van specifieke voorwaarden. Hierdoor kan verschillende CSS worden toegepast afhankelijk van de schermgrootte, oriëntatie, resolutie of andere kenmerken van het apparaat. Voornamelijk gebruikt voor responsief ontwerp, helpt het om het uiterlijk aan te passen op verschillende apparaten zoals desktops, tablets en mobiele telefoons.
Basis Syntax
1@media media-type and (condition) {
2 /* Styles applied when the media query is matched */
3}- In
media-type, specificeer het type media (bijv.screen,print). - Specificeer in
conditionvoorwaarden zoals schermgrootte of resolutie.
Mediatypes
- screen: Stijlen voor schermweergave, zoals op computers en smartphones.
- print: Dit is de stijl die wordt toegepast voor afdrukken.
- all: Dit is de stijl die wordt toegepast op alle media.
Veelgebruikte voorwaarden
- min-width / max-width: Pas stijlen toe volgens de minimale/maximale breedte van het scherm.
- min-height / max-height: Pas stijlen toe volgens de minimale/maximale hoogte van het scherm.
- orientation: Specificeer de schermoriëntatie (
portraitvoor verticaal,landscapevoor horizontaal). - resolution: Pas stijlen toe volgens de schermresolutie (bijv. DPI).
Voorbeeldgebruik
Stijlwijzigingen op basis van schermbreedte
Bijvoorbeeld, om stijlen te specificeren die worden toegepast wanneer de schermbreedte minder dan 600 pixels is, kun je dit als volgt schrijven:.
1@media screen and (max-width: 600px) {
2 body {
3 background-color: lightblue;
4 }
5 p {
6 font-size: 14px;
7 }
8}- Op apparaten met een schermbreedte van 600px of minder verandert de achtergrondkleur in lichtblauw en wordt de lettergrootte van alinea's 14px.
Stijlen op basis van schermoriëntatie
Om stijlen toe te passen wanneer het apparaat in landschapsoriëntatie staat, kun je dit als volgt schrijven:.
1@media screen and (orientation: landscape) {
2 body {
3 background-color: lightgreen;
4 }
5}- Wanneer het scherm in landschapsmodus staat, wordt de achtergrondkleur lichtgroen.
3. Voorbeeld van het combineren van meerdere voorwaarden
Je kunt meerdere condities combineren met and om stijlen toe te passen op meer specifieke condities.
1@media screen and (min-width: 768px) and (max-width: 1024px) {
2 body {
3 background-color: lightgray;
4 }
5}- Als de schermbreedte tussen 768px en 1024px ligt, verandert de achtergrondkleur naar lichtgrijs.
Toepassingsvoorbeeld: Responsief Ontwerp
1/* Mobile styles */
2@media screen and (max-width: 600px) {
3 body {
4 font-size: 14px;
5 }
6}
7
8/* Tablet styles */
9@media screen and (min-width: 601px) and (max-width: 1024px) {
10 body {
11 font-size: 16px;
12 }
13}
14
15/* Desktop styles */
16@media screen and (min-width: 1025px) {
17 body {
18 font-size: 18px;
19 }
20}In responsief ontwerp is het gebruikelijk om verschillende lay-outs toe te passen afhankelijk van de schermbreedte.
- Lettergroottes veranderen op mobiel (600px of minder), tablet (601px tot 1024px), en desktop (1025px of meer).
Samenvatting
@media is een krachtig hulpmiddel om CSS-stijlen aan te passen aan apparaten en schermformaten, en is essentieel voor responsief ontwerp. Door slim gebruik te maken van condities zoals min-width en max-width, kun je een website maken die geoptimaliseerd is voor verschillende apparaten.
Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.