@import url('styles.css') screen and (min-resolution: 2dppx);
@import url("styles.css") supports(display: flex) screen and (max-width: 400px);
@import url("styles.css") supports(not (display: flex)) screen and (max-width: 400px);
@import url('styles.css') supports(display: flex) screen and (min-resolution: 2dppx);

@media (min-resolution: 2dppx), (min-resolution: 192dpi) {
    .class {
        color: red;
    }
}

@media (min-resolution: 2.5dppx) {
    .class {
        color: red;
    }
}

@media (min-resolution: 144dpi) {
    .class {
        color: red;
    }
}

@media (min-resolution: 2x) {
    .class {
        color: red;
    }
}

@media (min-resolution: 120dpi) {
    .class {
        color: red;
    }
}

@media (min-resolution: 2dppx) {
    .class {
        color: red;
    }
}

@media only screen and (min-resolution: 124.8dpi) {
    .class {
        color: red;
    }
}

@media (min-resolution: 113.38dpcm) {
    .class {
        color: red;
    }
}

::placeholder {
    color: gray;
}

.image {
    background-image: url(image@1x.png);
}

@media (min-resolution: 2dppx) {
    .image {
        background-image: url(image@2x.png);
    }
}

@media (min-resolution: 33dpi) {
    .class {
        color: red;
    }
}

@media (min-resolution: 0dpi) {
    .class {
        color: red;
    }
}

@media (min-resolution: 2dppx),
(min-resolution: 192dpi) { }

@media (min-resolution: 2.5dppx) { }

@media (min-resolution: 144dpi) { }

@media (min-resolution: 2x) { }

@media (min-resolution: 120dpi) { }

@media (min-resolution: 2dppx) { }

@media only screen and (min-resolution: 124.8dpi) { }

@media (min-resolution: 113.38dpcm) { }

@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (min-resolution: 2dppx) {}

@media (min-resolution: 2dppx), (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2) {}