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.

▲ cobbzilla 10 hours ago | parent [-]

> 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.

The indirect way is for the JS to post the metric to the server, then you run with server-generated CSS. Don’t ask me if it actually works well though.

	▲	zamadatix 9 hours ago \| parent [-]
		Much simpler, you also just have JS update (and keep updated - initial DPI is not always the current DPI) --devicePixelRatio under :root on the client side. Something like that existing by default is all that's really missing.