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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
---
title: <resolution>
slug: Web/CSS/resolution
translation_of: Web/CSS/resolution
---
<div>{{CSSRef}}</div>
<h2 id=".C3.9Cbersicht" name=".C3.9Cbersicht">Übersicht</h2>
<p>Der <code><resolution></code> <a href="/de/docs/Web/CSS">CSS</a> Datentyp, der in <a href="/de/docs/Web/Guide/CSS/Media_Queries">Media Queries</a> verwendet wird, kennzeichnet die Pixeldichte eines Ausgabemediums, seine Auflösung. Er ist eine {{cssxref("<number>")}}, der direkt eine Auflösungseinheit (<code>dpi</code>, <code>dpcm</code>, ...) folgt. Wie bei allen CSS Einheiten gibt es kein Leerzeichen zwischen der Einheit und der Zahl.</p>
<p>Auf Bildschirmen ist die Länge relativ zu CSS Zoll, Zentimetern oder Pixeln, nicht zu physikalischen Werten.</p>
<p>Auch wenn alle Einheiten die gleiche Auflösung für den Wert <code>0</code> darstellen, darf die Einheit in diesem Fall nicht weggelassen werden, da sie keine {{cssxref("<length>")}} ist: <code>0</code> ist ungültig und repräsentiert weder <code>0dpi</code>, <code>0dpcm</code>, noch <code>0dppx</code>.</p>
<h2 id="Einheiten" name="Einheiten">Einheiten</h2>
<dl>
<dt><code><a name="dpi">dpi</a></code></dt>
<dd>Diese Einheit repräsentiert die Anzahl an Punkten pro Zoll. Ein Bildschirm hat typischerweise 72 oder 96dpi; ein gedrucktes Dokument erreicht normalerweise weit höhrere dpi Zahlen. Da 1 Zoll 2.54cm entspricht, <code>1dpi ≈ 0.39dpcm</code>.</dd>
<dt><code><a name="dpcm">dpcm</a></code></dt>
<dd>Diese Einheit repräsentiert die Anzahl an Punkten pro Zentimeter. Da 1 Zoll 2.54cm entspricht, <code>1dpcm ≈ 2.54dpi</code>.</dd>
<dt><code><a name="dppx">dppx</a></code></dt>
<dd>Diese Einheit repräsentiert die Anzahl an Punkten pro <code>px</code> Einheit. Wegen dem festen 1:96 Verhältnis von CSS <code class="css">in</code> zu CSS <code class="css">px</code>, ist <code class="css">1dppx</code> äquivalent zu <code class="css">96dpi</code>, dies enspricht der Standardauflösung von Bildern, die in CSS dargestellt werden, wie in {{cssxref("image-resolution")}} definiert.</dd>
</dl>
<h2 id="Beispiele" name="Beispiele">Beispiele</h2>
<p>Hier sind einige korrekte Verwendungen von <code><resolution></code> Werten:</p>
<pre>96dpi Korrekte Verwendung: ein {{cssxref("<number>")}} Wert (hier ein {{cssxref("<integer>")}}) gefolgt von einer Einheit.
@media print and (min-resolution: 300dpi) { ... } Korrekte Verwendung im Kontext einer <a href="/de/docs/Web/Guide/CSS/Media_Queries">Media Query</a>.
</pre>
<p>Hier sind einige inkorrekte Verwendungen:</p>
<pre>72 dpi Falsch: Keine Leerzeichen erlaubt zwischen {{cssxref("<number>")}} und der Einheit.
ten dpi Falsch: Nur Ziffern dürfen verwendet werden.
0 Falsch: Die Einheit kann nur für 0 Werte weggelassen werden, die einen {{cssxref("<length>")}} Wert darstellen.
</pre>
<h2 id="Spezifization" name="Spezifization">Spezifization</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('CSS3 Values', '#resolution', '<resolution>')}}</td>
<td>{{Spec2('CSS3 Values')}}</td>
<td>Faktorisierung des Typs in einer allgemeineren Spezifikation. Keine Änderung.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Images', '#resolution-units', '<resolution>')}}</td>
<td>{{Spec2('CSS3 Images')}}</td>
<td><code>dppx</code> Einheit hinzugefügt</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}</td>
<td>{{Spec2('CSS3 Media Queries')}}</td>
<td>Ursprüngliche Definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Kompatibilit.C3.A4t" name="Browser_Kompatibilit.C3.A4t">Browser Kompatibilität</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Merkmal</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Grundlegende Unterstützung</td>
<td>29</td>
<td>3.5 (1.9.1) [**]</td>
<td>9</td>
<td>9.5</td>
<td>{{CompatNo}} [*]</td>
</tr>
<tr>
<td><code>dppx</code></td>
<td>29</td>
<td>{{CompatGeckoDesktop("16.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>12.10</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Merkmal</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Grundlegende Unterstützung</td>
<td>{{CompatNo}} [*]</td>
<td>yes</td>
<td>?</td>
<td>yes</td>
<td>{{CompatNo}} [*]</td>
</tr>
<tr>
<td><code>dppx</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoMobile("16.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>12.10</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[*] Die Webkit Engine unterstützt die CSS Auflösungsabfrage, wie sie in der Spezifikation definiert wird, nicht. Die Benutzung der nicht standardisierten <code>device-pixel-ratio</code> Abfrage wird für Safari Browser benötigt, siehe <a href="https://bugs.webkit.org/show_bug.cgi?id=16832">Bug 16832</a>.</p>
<p>[**] Vor Firefox 8 (Gecko 8.0) hat die Eigenschaft fälschlicherweise nur CSS {{cssxref("<integer>")}} Größenangaben erlaubt, gefolgt von der Einheit. Ab dieser Version werden alle gültigen CSS Größenangaben unterstützt ({{cssxref("<number>")}} direkt gefolgt von der Einheit).</p>
<h2 id="Siehe_auch" name="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/docs/Web/Guide/CSS/Media_Queries">CSS Media Queries</a></li>
</ul>
|
