JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<div class="dpi-detector">
    %)
</div>

CSS

.dpi-detector{
    position: absolute;
    width: 96px;
    height: 96px;
    line-height: 96px;
    top: 50px;
    left: 50px;
    border: 1px solid red;
    color: white;
    background: #007BA7;
    text-align: center;
    vertical-align: center;
}

@media(max-resolution: 300dpi){ 
.dpi-detector {
    border: 1px solid yellow;
    background: #9933FF;
    width: 300px;
    height: 300px;
}
}
@media(max-resolution: 200dpi){ 
.dpi-detector {
    border: 1px solid blue;
    background: #00CC99;
    width: 200px;
    height: 200px;
}
}

@media(max-resolution: 96dpi){ 
.dpi-detector {
    border: 1px solid green;
    width: 96px;
    height: 96px;
    background: #007BA7;
}
}