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.
Die resolution
- CSS Medienabfrage 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 handelt sich um ein Bereichs-Merkmal, was bedeutet, dass Sie auch die mit Präfix versehenen Varianten min-resolution
und max-resolution
verwenden können, um jeweils Mindest- und 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
Specification |
---|
Media Queries Level 4 # resolution |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
window.devicePixelRatio
- Die
image-resolution
-Eigenschaft