resolution
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.
Das resolution CSS Medienmerkmal kann verwendet werden, um die Pixeldichte des Ausgabegeräts zu testen.
Syntax
Das resolution Merkmal wird als ein <resolution> Wert angegeben, der die Pixeldichte des Ausgabegeräts darstellt. Es ist ein Bereichsmerkmal, was bedeutet, dass Sie auch die mit Präfix versehenen Varianten min-resolution und max-resolution verwenden können, um minimale und maximale Werte abzufragen.
Beispiele
HTML
html
<p>This is a test of your device's pixel density.</p>
CSS
css
/* Exact resolution with unit `dpi` */
@media (resolution: 150dpi) {
p {
color: red;
}
}
/* Minimum resolution synonym units: `dppx` and `x` */
@media (min-resolution: 2dppx) {
p {
text-decoration: underline;
}
}
@media (min-resolution: 2x) {
p {
text-decoration: underline;
}
}
/* Maximum resolution with unit `dpcm` */
@media (max-resolution: 2dpcm) {
p {
background: yellow;
}
}
Ergebnis
Spezifikationen
| Specification |
|---|
| Media Queries Level 4 # resolution |
Browser-Kompatibilität
Siehe auch
window.devicePixelRatio- Die
image-resolutionEigenschaft