1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
---
title: Media queries
slug: Web/CSS/Media_Queries
tags:
- CSS
- Media Queries
- NeedsTranslation
- Overview
- Reference
- TopicStub
translation_of: Web/CSS/Media_Queries
---
<div class="boxed translate-rendered text-content">
<div>
<div class="boxed translate-rendered text-content">
<div>{{CSSRef}}</div>
<p>Mit <strong>Media Queries</strong> können Sie Ihre Website oder App abhängig vom Vorhandensein oder Wert verschiedener Geräteeigenschaften und Parameter anpassen.</p>
<p>Sie sind eine Schlüsselkomponente des <a href="/de/docs/Web/Progressive_web_apps">responsiven Designs</a>. Eine Media Query kann zum Beispiel die Schriftgröße auf kleinen Geräten verkleinern, den Abstand zwischen Absätzen vergrößern, wenn eine Seite im Hochformat angezeigt wird, oder die Größe von Schaltflächen auf Touchscreens erhöhen.</p>
<p>Verwenden Sie in <a href="/de/docs/Web/CSS">CSS</a> die <a href="/de/docs/Web/CSS/At-rule">@-Regeln</a> {{cssxref("@media")}}, um einen Teil eines Stylesheets basierend auf dem Ergebnis einer Media Query bedingt anzuwenden. Verwenden Sie {{cssxref("@import")}}, um ein ganzes Stylesheet bedingt anzuwenden.</p>
<h3 id="Media_Queries_in_HTML">Media Queries in HTML</h3>
<p>In <a href="/de/docs/Web/HTML">HTML</a> können Media-Queries auf verschiedene Elemente angewendet werden:</p>
<ul>
<li>Im {{HTMLElement("link")}}-Attribut des {{htmlattrxref("media", "link")}}-Elements definieren sie das Medium, auf das eine verlinkte Ressource (typischerweise CSS) angewendet werden soll.</li>
<li>Im {{HTMLElement("source")}}-Attribut des {{htmlattrxref("media", "source")}}-Elements definieren sie die Medien, auf die diese Quelle angewendet werden soll. (Dies ist nur innerhalb von {{HTMLElement("Bild")}}-Elementen gültig.)</li>
<li>Im {{HTMLElement("style")}}-Attribut des Elements {{htmlattrxref("media", "style")}} definieren sie die Medien, auf die der Stil angewendet werden soll.</li>
</ul>
<h3 id="Media_Queries_in_JavaScript">Media Queries in JavaScript</h3>
<p>In JavaScript können Sie die Methode {{domxref("Window.matchMedia()")}} verwenden, um das Fenster gegen eine Medienabfrage zu testen. Sie können auch {{domxref("MediaQueryList.addListener()")}} verwenden, um benachrichtigt zu werden, wenn sich der Zustand einer Abfrage ändert. Mit dieser Funktionalität kann Ihre Website oder App auf Änderungen der Gerätekonfiguration, der Ausrichtung oder des Zustands reagieren.</p>
<p>Mehr über die programmatische Verwendung von Media Queries erfahren Sie in <a href="/de/docs/Web/CSS/Media_Queries/Testing_media_queries">Media Queries testen</a>.</p>
<h2 id="Referenz">Referenz</h2>
<h3 id="-Regeln">@-Regeln</h3>
<div class="index">
<ul>
<li>{{cssxref("@import")}}</li>
<li>{{cssxref("@media")}}</li>
</ul>
</div>
<h2 id="Anleitung">Anleitung</h2>
<dl>
<dt><a href="/de/docs/Web/CSS/Media_Queries/Using_media_queries">Media Queries verwenden</a></dt>
<dd>Stellt Media Queries, ihre Syntax und die Operatoren und Media Features vor, die zur Konstruktion von Media Query-Ausdrücken verwendet werden.</dd>
<dt><a href="/de/docs/Web/CSS/Media_Queries/Testing_media_queries">Media Queries programmatisch testen</a></dt>
<dd>Beschreibt, wie Sie Media Queries in Ihrem JavaScript-Code verwenden, um den Zustand eines Geräts zu ermitteln und Listener einzurichten, die Ihren Code benachrichtigen, wenn sich die Ergebnisse von Media Queries ändern (z. B. wenn der Benutzer den Bildschirm dreht oder die Größe des Browsers ändert).</dd>
<dt><a href="/de/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility">Verwendung von Media Queries für Barrierefreiheit</a></dt>
<dd>Erfahren Sie, wie Media Queries dem Benutzer helfen können, Ihre Website besser zu verstehen.</dd>
</dl>
<h2 id="Spezifikationen">Spezifikationen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS5 Media Queries')}}</td>
<td>{{Spec2('CSS5 Media Queries')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS3 Conditional')}}</td>
<td>{{Spec2('CSS3 Conditional')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS4 Media Queries')}}</td>
<td>{{Spec2('CSS4 Media Queries')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS3 Media Queries')}}</td>
<td>{{Spec2('CSS3 Media Queries')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'media.html')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Ursprüngliche Definition</td>
</tr>
</tbody>
</table>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li>Verwenden Sie {{cssxref("@supports")}}, um Stile anzuwenden, die von der Browserunterstützung für verschiedene CSS-Technologien abhängen.</li>
</ul>
</div>
</div>
</div>
|
