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 <resolution>-Wert angegeben, der die Pixeldichte des Ausgabegeräts darstellt. Es ist ein Bereichsmerkmal, was bedeutet, dass Sie auch die vorangestellten Varianten min-resolution und max-resolution verwenden können, um minimale bzw. 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
Loading…
Siehe auch
window.devicePixelRatio- Die
image-resolution-Eigenschaft