resolution
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2022 browserübergreifend verfügbar.
Die resolution CSS Medienfunktion kann verwendet werden, um die Pixeldichte des Ausgabegeräts zu testen.
Syntax
Die resolution-Funktion wird als ein <resolution>-Wert angegeben, der die Pixeldichte des Ausgabegeräts darstellt. Es handelt sich um eine Bereichsfunktion, was bedeutet, dass Sie auch die mit Präfix versehenen Varianten min-resolution und max-resolution verwenden können, um Mindest- bzw. Höchstwerte 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
| Spezifikation |
|---|
| Media Queries Level 4 # resolution |
Browser-Kompatibilität
Siehe auch
window.devicePixelRatio- Die
image-resolutionEigenschaft