时间戳

首页 > 解决方案 > 如何在css中模拟真实世界的尺寸？

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

问题描述

我想制作一个网站，无论显示器或智能手机的分辨率如何，都会以该宽度显示一个对象，例如宽度为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)));
}

标签： javascripthtmlcssunits-of-measurementppi

解决方案

使用 CSS 高度和宽度。

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

因此，例如，如果您想显示 35 厘米宽和 50 厘米高的元素，您可以使用 css 进行设置：

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

祝你好运！

似乎虽然这应该有效，但还不够准确。看评论。

推荐阅读