我们现在可以在屏幕CSS上将像素精确地映射到英寸吗？

Question

好的。这是一个古老的，但很有趣。

我知道我们已经将1in物理单位映射到屏幕dpi上的96px。这种映射来自90年代，当时显示器/屏幕的分辨率较低。那是不同的时间。 Web当时是“仅桌面”实用程序，并且人们可能会怀疑今天的实现未能跟上不断变化的Web格局。

大约2020年。

我想在网页的--inch中声明一个CSS变量:root，并使用媒体查询将其映射到不同设备的绝对英寸。我可以在当前拥有的设备上执行此操作，例如：

/* css */
:root {
   --inch: 130px; /* this value is from my Macbook Pro 2017 for example. */
}

.square {
  width: var(--inch);
  height: var(--inch);
  background: red;
}

然后我用尺子测量了屏幕上正方形的尺寸。我什至为此做了一个codepen来测试绝对英寸并与浏览器/机器支持的in单位进行比较。现在，我应该如何使用媒体查询在移动设备，watchos，ipad，台式机以及可能的电视和投影仪之间设置--inch变量？

Answer 1

一种解决方案是检查屏幕的width，然后更新CSS变量--inch。您可以使用javascript这样的代码来实现此目标：

const windowWidth = window.innerWidth

if (windowWidth < 700) {
  document.documentElement.style.setProperty('--inch', '100px');
  document.documentElement.style.setProperty('--square-background', 'green');
}

if (windowWidth < 500) {
  document.documentElement.style.setProperty('--inch', '50px');
  document.documentElement.style.setProperty('--square-background', 'purple');
}

:root {
  --inch: 130px;
  --square-background: red;
}

.square {
  width: var(--inch);
  height: var(--inch);
  background: var(--square-background);
}

.standards {
  width: 1in;
  height: 1in;
  background: blue;
  margin: auto 1vw;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="square flex">physical measure.</div>

<div class="standards flex">web standards</div>

我更新正方形的background-color，以获得更好的视觉示例。