Überblick über Responsives Design in CSS
Dieser Artikel erklärt den Überblick über Responsive Design in CSS.
Wir geben einen Überblick über das Grundkonzept des Responsive Designs und die Rolle von CSS bei dessen Umsetzung.
YouTube Video
HTML zur Vorschau
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>Überblick über Responsives Design in CSS
Im CSS ist responsives Design eine Technik, um das Layout und den Inhalt einer Webseite auf verschiedenen Geräten und Bildschirmgrößen, wie Smartphones, Tablets und Desktops, angemessen anzuzeigen. Um ein responsives Design zu erreichen, werden hauptsächlich die folgenden Techniken und Methoden verwendet.
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 sind eine Funktion, die es ermöglicht, verschiedene CSS-Regeln basierend auf Gerätebreite, -höhe, -auflösung und mehr anzuwenden. Dadurch können je nach Bildschirmgröße unterschiedliche Stile angewendet werden.
In diesem Beispiel ändert sich die Hintergrundfarbe je nach Bildschirmbreite.
Flüssige Layouts
1.container {
2 width: 80%; /* 80% width relative to the parent element */
3 margin: 0 auto; /* Center the element */
4}Im responsiven Design werden Breite und Höhe von Elementen mit relativen Einheiten wie Prozent oder em anstelle absoluter Pixelwerte angegeben. Dadurch kann sich das Layout flexibel an die Bildschirmgröße anpassen.
Responsive Bilder
1img {
2 max-width: 100%;
3 height: auto;
4}Bilder werden ebenfalls so eingestellt, dass sie entsprechend der Bildschirmgröße skaliert werden. Zum Beispiel kann mit max-width festgelegt werden, dass Bilder die Breite ihres übergeordneten Elements nicht überschreiten.
Viewport-Einstellungen
1<meta name="viewport" content="width=device-width, initial-scale=1.0">Verwenden Sie das <meta>-Tag in HTML, um sicherzustellen, dass der Browser die Bildschirmbreite des Geräts korrekt interpretiert. Ohne diese Einstellung funktioniert responsives Design nicht richtig, insbesondere auf mobilen Geräten.
Verwendung von CSS-Frameworks
CSS-Frameworks wie Bootstrap und Tailwind CSS werden oft verwendet, um ein responsives Design effizient umzusetzen. Diese Frameworks sind darauf ausgelegt, mit vordefinierten Klassen einfach responsive Layouts zu erstellen.
Beispiel: Das Rastersystem von 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>Im obigen Beispiel werden bei einer Bildschirmbreite von md (mittlere Größe, in der Regel 768px oder mehr) zwei Spalten nebeneinander angeordnet, während sie auf schmaleren Bildschirmen vertikal angeordnet werden.
Flexbox- und 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}Mit CSS flexbox oder grid sind flexible Layoutanpassungen möglich. Diese Layout-Techniken eignen sich hervorragend für responsives Design, da sie es ermöglichen, Layouts automatisch an die Bildschirmgröße anzupassen.
Zusammenfassung
Responsives Design ist eine wichtige Methode, um sicherzustellen, dass Benutzer Webseiten bequem ansehen können, unabhängig davon, welches Gerät sie verwenden. Durch die Kombination von Media Queries, flexiblen Layouts, Frameworks und neuen Layout-Technologien wie Flexbox und Grid können flexiblere und anpassungsfähigere Webseiten erstellt werden.
Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.