---
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>&lt;resolution&gt;</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("&lt;number&gt;")}}, 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("&lt;length&gt;")}} 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>&lt;resolution&gt;</code> Werten:</p>

<pre>96dpi                                              Korrekte Verwendung: ein {{cssxref("&lt;number&gt;")}} Wert (hier ein {{cssxref("&lt;integer&gt;")}}) 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("&lt;number&gt;")}} 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("&lt;length&gt;")}} 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', '&lt;resolution&gt;')}}</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', '&lt;resolution&gt;')}}</td>
   <td>{{Spec2('CSS3 Images')}}</td>
   <td><code>dppx</code> Einheit hinzugefügt</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Media Queries', '#resolution', '&lt;resolution&gt;')}}</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("&lt;integer&gt;")}} Größenangaben erlaubt, gefolgt von der Einheit. Ab dieser Version werden alle gültigen CSS Größenangaben unterstützt ({{cssxref("&lt;number&gt;")}} 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>