<resolution>
Baseline 2022
Newly available
Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Der <resolution>
CSS Datentyp, der zur Beschreibung von Auflösungen in Media Queries verwendet wird, bezeichnet die Pixeldichte eines Ausgabegeräts, d. h. seine Auflösung.
Bei Bildschirmen beziehen sich die Einheiten auf CSS Zoll, Zentimeter oder Pixel, nicht auf physikalische Werte.
Syntax
Der <resolution>
Datentyp besteht aus einer strikt positiven <number>
gefolgt von einer der unten aufgeführten Einheiten. Wie bei allen CSS-Dimensionen gibt es keinen Abstand zwischen dem Einheitensymbol und der Zahl.
Einheiten
dpi
-
Repräsentiert die Anzahl der Punkte pro Zoll. Bildschirme enthalten typischerweise 72 oder 96 Punkte pro Zoll, aber der dpi-Wert für gedruckte Dokumente ist normalerweise viel höher. Da 1 Zoll 2,54 cm entspricht, gilt
1dpi ≈ 0.39dpcm
. dpcm
-
Repräsentiert die Anzahl der Punkte pro Zentimeter. Da 1 Zoll 2,54 cm ist, gilt
1dpcm ≈ 2.54dpi
. dppx
-
Repräsentiert die Anzahl der Punkte pro
px
Einheit. Aufgrund des festen Verhältnisses von 1:96 von CSSin
zu CSSpx
entspricht1dppx
96dpi
, was der Standardauflösung von in CSS angezeigten Bildern entspricht, wie durchimage-resolution
definiert. x
-
Alias für
dppx
.
Hinweis: Obwohl die Zahl 0
immer gleich bleibt, unabhängig von der Einheit, darf die Einheit nicht weggelassen werden. Mit anderen Worten, 0
ist ungültig und entspricht nicht 0dpi
, 0dpcm
oder 0dppx
.
Beispiele
Verwendung in einer Media Query
@media print and (min-resolution: 300dpi) {
/* … */
}
@media (resolution: 120dpcm) {
/* … */
}
@media (min-resolution: 2dppx) {
/* … */
}
@media (resolution: 1x) {
/* … */
}
Gültige Auflösungen
96dpi 50.82dpcm 3dppx
Ungültige Auflösungen
72 dpi Spaces are not allowed between the number and the unit. ten dpi The number must use digits only. 0 The unit is required.
Spezifikationen
Specification |
---|
CSS Values and Units Module Level 4 # resolution |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- resolution Medienfunktion
- Die
image-resolution
Eigenschaft - Verwendung von @media Queries