<resolution>
Baseline 2022Newly 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, gibt die Pixeldichte eines Ausgabegeräts an, d. h., dessen Auflösung.
Auf 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 der Einheit und der Zahl.
Einheiten
dpi
-
Stellt die Anzahl der Punkte pro Zoll dar. Bildschirme enthalten typischerweise 72 oder 96 Punkte pro Zoll, aber die dpi für gedruckte Dokumente ist normalerweise wesentlich höher. Da 1 Zoll 2,54 cm entspricht, gilt
1dpi ≈ 0,39dpcm
. dpcm
-
Stellt die Anzahl der Punkte pro Zentimeter dar. Da 1 Zoll 2,54 cm entspricht, gilt
1dpcm ≈ 2,54dpi
. dppx
-
Stellt die Anzahl der Punkte pro
px
-Einheit dar. Aufgrund des festen 1:96-Verhältnisses von CSS-in
zu CSS-px
entspricht1dppx
96dpi, was der Standardauflösung der in CSS angezeigten Bilder entspricht, wie sie durchimage-resolution
definiert ist. x
-
Alias für
dppx
.
Hinweis:
Obwohl die Zahl 0
unabhängig von der Einheit immer gleich ist, darf die Einheit hier nicht weggelassen werden. Anders ausgedrückt: 0
ist ungültig und stellt nicht 0dpi
, 0dpcm
oder 0dppx
dar.
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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<resolution> | ||||||||||||
dpcm unit | ||||||||||||
dpi unit | ||||||||||||
dppx unit | ||||||||||||
x unit |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
- Has more compatibility info.
Siehe auch
- resolution-Media-Feature
- Die
image-resolution
-Eigenschaft - Verwendung von @media-Queries