`@media` und responsives Design
Dieser Artikel erklärt @media und responsives Design.
Sie lernen, wie Sie mit der grundlegenden Syntax und Anwendungsbeispielen von @media flexible Layouts erstellen können.
YouTube Video
HTML zur Vorschau
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-Regeln
@media ist eine Regel zur Verwendung von CSS-Media-Queries, um Stile basierend auf bestimmten Bedingungen anzuwenden. Dadurch können unterschiedliche CSS-Stile basierend auf Bildschirmgröße, Ausrichtung, Auflösung oder anderen Merkmalen des Geräts angewendet werden. Hauptsächlich für responsives Design verwendet, hilft es, das Erscheinungsbild auf verschiedenen Geräten wie Desktops, Tablets und Mobiltelefonen anzupassen.
Grundlegende Syntax
1@media media-type and (condition) {
2 /* Styles applied when the media query is matched */
3}- Im
media-typewird die Art des Mediums angegeben (z. B.screen,print). - Im
conditionwerden Bedingungen wie Bildschirmgröße oder Auflösung angegeben.
Medientypen
- screen: Stile für die Bildschirmanzeige, wie auf Computern und Smartphones.
- print: Dies ist der Stil, der für das Drucken angewendet wird.
- all: Dies ist der Stil, der auf alle Medien angewendet wird.
Häufig verwendete Bedingungen
- min-width / max-width: Stile basierend auf der minimalen/maximalen Breite des Bildschirms anwenden.
- min-height / max-height: Stile basierend auf der minimalen/maximalen Höhe des Bildschirms anwenden.
- orientation: Die Bildschirmausrichtung angeben (
portraitfür vertikal,landscapefür horizontal). - resolution: Stile basierend auf der Bildschirmauflösung anwenden (z. B. DPI).
Beispielhafte Verwendung
Stiländerungen basierend auf der Bildschirmbreite
Zum Beispiel kann man folgende Stile verwenden, wenn die Bildschirmbreite weniger als 600 Pixel beträgt:.
1@media screen and (max-width: 600px) {
2 body {
3 background-color: lightblue;
4 }
5 p {
6 font-size: 14px;
7 }
8}- Auf Geräten mit einer Bildschirmbreite von 600px oder weniger ändert sich die Hintergrundfarbe zu Hellblau und die Schriftgröße des Absatzes wird 14px.
Stile basierend auf der Bildschirmausrichtung
Um Stile anzuwenden, wenn das Gerät im Querformat ist, kann man es so schreiben:.
1@media screen and (orientation: landscape) {
2 body {
3 background-color: lightgreen;
4 }
5}- Wenn der Bildschirm im Querformat ist, wird die Hintergrundfarbe hellgrün.
3. Beispiel für die Kombination mehrerer Bedingungen
Sie können mehrere Bedingungen mit and kombinieren, um Stile auf spezifischere Bedingungen anzuwenden.
1@media screen and (min-width: 768px) and (max-width: 1024px) {
2 body {
3 background-color: lightgray;
4 }
5}- Wenn die Bildschirmbreite zwischen 768px und 1024px liegt, ändert sich die Hintergrundfarbe zu Hellgrau.
Anwendungsbeispiel: Responsives Design
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}Im responsiven Design ist es üblich, je nach Bildschirmbreite unterschiedliche Layouts anzuwenden.
- Die Schriftgrößen ändern sich auf Mobilgeräten (600px oder weniger), Tablets (601px bis 1024px) und Desktops (1025px oder mehr).
Zusammenfassung
@media ist ein leistungsstarkes Werkzeug zum Wechseln von CSS-Stilen je nach Gerät und Bildschirmgröße und unerlässlich für responsives Design. Durch geschickte Verwendung von Bedingungen wie min-width und max-width können Sie eine Website optimieren, die für verschiedene Geräte geeignet ist.
Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.