javascript - 如何在CSS中模拟真实世界的尺寸？

Question

我想制作一个网站，无论显示器或智能手机的分辨率如何，宽度为 100mm 的对象都会以该宽度显示。

出于这个原因，我要求用户提供他的显示尺寸以计算正确的 ppi。但是，它并不适用于所有设备。

编辑:这是我目前的代码:

var dpr = window.devicePixelRatio;
var inch = 25.4;

var pixelHeight = screen.height * dpr;
var pixelWidth = screen.width * dpr;

function calculatePpi(monitorDiagonal) {
    return (Math.sqrt(Math.pow(pixelWidth, 2) + Math.pow(pixelHeight, 2))) / monitorDiagonal;
}

function mmToPx(mm) {
    return  (((mm / inch) * calculatePpi(monitorDiag)));
}

Answer 1

使用 css 高度和宽度。

高度和宽度可以设置为auto(这是默认的。意味着浏览器计算高度和宽度)，或者以长度值指定，如px、cm等，或者以百分比(%)来指定包含 block 。

因此，如果您想要显示 35cm 宽和 50cm 高的元素，您可以使用 css 进行设置:

#example {
  height: 50cm;
  width: 35cm;
}

祝你好运!

---

看起来虽然这应该有效，但不够准确。查看评论。