Overzicht van responsief ontwerp in CSS
Dit artikel legt het overzicht van responsive design in CSS uit.
We geven een overzicht van het basisconcept van responsive design en de rol van CSS bij de implementatie ervan.
YouTube Video
HTML voor Voorbeeldweergave
css-responsive-overview.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-overview.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>Responsive Design Related Properties</h2>
20 </header>
21 <article>
22 <h3>Media Queries</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26/* When the screen width is 600px or less */
27@media (max-width: 600px) {
28 body {
29 background-color: lightblue;
30 }
31}
32/* When the screen width is between 601px and 1200px */
33@media (min-width: 601px) and (max-width: 1200px) {
34 body {
35 background-color: lightgreen;
36 }
37}
38/* When the screen width is 1201px or more */
39@media (min-width: 1201px) {
40 body {
41 background-color: lightyellow;
42 }
43}
44</pre>
45 </section>
46 </article>
47 <article>
48 <h3>Fluid Layouts</h3>
49 <section>
50 <header><h4>CSS</h4></header>
51<pre class="sample">
52.container {
53 width: 80%; /* 80% width relative to the parent element */
54 margin: 0 auto; /* Center the element */
55}
56</pre>
57 </section>
58 </article>
59 <article>
60 <h3>Responsive Images</h3>
61 <section>
62 <header><h4>CSS</h4></header>
63<pre class="sample">
64img {
65 max-width: 100%;
66 height: auto;
67}
68</pre>
69 </section>
70 </article>
71 <article>
72 <h3>Viewport</h3>
73 <section>
74 <header><h4>HTML</h4></header>
75 <pre><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre>
76 </section>
77 </article>
78 <article>
79 <h3>CSS Frameworks</h3>
80 <section>
81 <header><h4>HTML</h4></header>
82<pre>
83<div class="container">
84 <div class="row">
85 <div class="col-md-6">Left content</div>
86 <div class="col-md-6">Right content</div>
87 </div>
88</div>
89</pre>
90 </section>
91 </article>
92 <article>
93 <h3>Flexbox & Grid Layout</h3>
94 <section>
95 <header><h4>CSS</h4></header>
96<pre class="sample">
97/* Flex Example */
98.container {
99 display: flex;
100 flex-wrap: wrap; /* Allow elements to wrap */
101}
102
103.item {
104 flex: 1 1 200px; /* Each item has a minimum width of 200px */
105}
106
107/* Grid Example */
108.container {
109 display: grid;
110 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
111 gap: 16px;
112}
113</pre>
114 </section>
115 </article>
116 </main>
117</body>
118</html>Overzicht van responsief ontwerp in CSS
In CSS is responsief ontwerp een techniek voor het op de juiste manier weergeven van de lay-out en inhoud van een webpagina op verschillende apparaten en schermformaten, zoals smartphones, tablets en desktops. Om responsief ontwerp te bereiken, worden voornamelijk de volgende technieken en methoden gebruikt.
Media Queries
1/* When the screen width is 600px or less */
2@media (max-width: 600px) {
3 body {
4 background-color: lightblue;
5 }
6}
7/* When the screen width is between 601px and 1200px */
8@media (min-width: 601px) and (max-width: 1200px) {
9 body {
10 background-color: lightgreen;
11 }
12}
13/* When the screen width is 1201px or more */
14@media (min-width: 1201px) {
15 body {
16 background-color: lightyellow;
17 }
18}Media queries zijn een functie waarmee u verschillende CSS-regels kunt toepassen op basis van apparaatbreedte, -hoogte, resolutie en meer. Hierdoor kunnen verschillende stijlen worden toegepast afhankelijk van de schermgrootte.
In dit voorbeeld verandert de achtergrondkleur afhankelijk van de schermbreedte.
Vloeiende lay-outs
1.container {
2 width: 80%; /* 80% width relative to the parent element */
3 margin: 0 auto; /* Center the element */
4}Bij responsief ontwerp worden de breedte en hoogte van elementen gespecificeerd met behulp van relatieve eenheden zoals percentages of em in plaats van absolute pixelwaarden. Hierdoor kan de lay-out zich flexibel aanpassen aan de schermgrootte.
Responsieve afbeeldingen
1img {
2 max-width: 100%;
3 height: auto;
4}Afbeeldingen worden ook ingesteld om te schalen op basis van de schermgrootte. Door bijvoorbeeld max-width te gebruiken, kunnen afbeeldingen worden aangepast zodat ze de breedte van hun bovenliggende element niet overschrijden.
Viewport-instellingen
1<meta name="viewport" content="width=device-width, initial-scale=1.0">Gebruik de <meta>-tag in HTML om ervoor te zorgen dat de browser de schermbreedte van het apparaat correct interpreteert. Zonder dit werkt responsief ontwerp niet correct, met name op mobiele apparaten.
Gebruik van CSS-frameworks
CSS-frameworks zoals Bootstrap en Tailwind CSS worden vaak gebruikt om efficiënt een responsief ontwerp te realiseren. Deze frameworks zijn ontworpen om eenvoudig responsieve lay-outs te maken met vooraf gedefinieerde klassen.
Voorbeeld: het gridsysteem van Bootstrap
1<div class="container">
2 <div class="row">
3 <div class="col-md-6">Left content</div>
4 <div class="col-md-6">Right content</div>
5 </div>
6</div>In het bovenstaande voorbeeld, wanneer de schermbreedte md (medium grootte, meestal 768px of meer) is, worden twee kolommen naast elkaar geplaatst, maar op smallere schermen worden ze verticaal gerangschikt.
Flexbox en Grid Layout
1/* Flex Example */
2.container {
3 display: flex;
4 flex-wrap: wrap; /* Allow elements to wrap */
5}
6
7.item {
8 flex: 1 1 200px; /* Each item has a minimum width of 200px */
9}
10
11/* Grid Example */
12.container {
13 display: grid;
14 grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
15 gap: 16px;
16}Het gebruik van CSS flexbox of grid maakt flexibele aanpassingen aan de lay-out mogelijk. Deze lay-outtechnieken zijn zeer geschikt voor responsief design, aangezien ze het eenvoudig maken om layouts automatisch aan te passen aan de schermgrootte.
Samenvatting
Responsief design is een belangrijke methode om ervoor te zorgen dat gebruikers comfortabel websites kunnen bekijken, ongeacht het apparaat dat ze gebruiken. Door media queries, flexibele layouts, frameworks en nieuwe lay-outtechnologieën zoals Flexbox en Grid te combineren, is het mogelijk flexibelere en adaptieve webpagina's te maken.
Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.