Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
resolution CSS-Medienmerkmal
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.
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 repräsentiert. Es handelt sich um ein Bereichsmerkmal, was bedeutet, dass Sie auch die vorangestellten Varianten min-resolution und max-resolution verwenden können, um Mindest- und Höchstwerte abzufragen.
Beispiele
HTML
<p>This is a test of your device's pixel density.</p>
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
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.
Siehe auch
window.devicePixelRatio- Die
image-resolution-Eigenschaft