MDN wants to learn about developers like you:

The resolution CSS @media media feature can be used to apply styles based on the pixel density of the output device.


The resolution feature is specified as a <resolution> value representing the pixel density of the output device. It is a range feature, meaning that you can also use the prefixed min-resolution and max-resolution variants to query minimum and maximum values, respectively.



<p>This is a test of your device's pixel density.</p>


/* Exact resolution */
@media (resolution: 150dpi) {
  p {
    color: red;

/* Minimum resolution */
@media (min-resolution: 72dpi) {
  p {
    font-size: 1.5em;

/* Maximum resolution */
@media (max-resolution: 300dpi) {
  p {
    background: yellow;



Specification Status Comment
Media Queries
The definition of 'resolution' in that specification.
Recommendation Initial definition.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) ? (Yes) ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

Document Tags and Contributors

 Contributors to this page: mfluehr, kscarfone, cvrebert
 Last updated by: mfluehr,