Comment by drysart

You can kinda get close in pure CSS with CSS media queries using the resolution query on dppx measurements; but that only allows you to be as granular as however many distinct "dots per CSS pixel" values you want to add media queries for. Something like this would let you scale by device resolution for both traditional 96dpi screens, higher DPI 192dpi screens, and super high resolution 288dpi screens:

    body { --resolution-scale: 1; }
    @media (min-resolution: 2dppx) { body { --resolution-scale: 2; } }
    @media (min-resolution: 3dppx) { body { --resolution-scale: 3; } }
    .myPixelSizedElement { width: calc(96px * var(--resolution-scale)); }

But unfortunately there's no way to directly use the devicePixelRatio value you can read from Javascript directly in a CSS calculation to be able to get a precise scaling on any arbitrary pixel density.