JSFiddle - React, Tailwind, and code Playground
HTML
<div></div>
CSS
div {
background-color: #000;
width: calc(100px * var(--px));
height: calc(100px * var(--px));
}
JavaScript
let pixelRatioBox = document.querySelector(".pixel-ratio");
const updatePixelRatio = () => {
document.documentElement.style.setProperty('--px', 1/devicePixelRatio);
matchMedia(`(resolution: ${devicePixelRatio}dppx)`).addEventListener("change", updatePixelRatio, { once: true })
}
updatePixelRatio();