时间戳

首页 > 解决方案 > 我们现在可以在屏幕 CSS 上准确地映射英寸吗？

css - 我们现在可以在屏幕 CSS 上准确地映射英寸吗？

问题描述

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

我知道我们有1in物理单位映射到96px屏幕 dpi。这种映射可以追溯到 90 年代，当时显示器/屏幕的分辨率要低得多。那是一个不同的时代。那时，Web 是“仅限桌面”的实用程序，人们会怀疑今天的实施并没有跟上Web 的新格局。

大约在 2020 年。

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

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

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

然后我用尺子测量了屏幕上正方形的尺寸。我什至为此制作了一个代码笔来测试和比较绝对英寸与in您的浏览器/机器支持的单位。

现在。我们应该如何--inch在移动设备、watchos、iPad、台式机以及电视和投影仪（如果可能的话）之间设置变量？

更新 1：稍微确定了范围。

以下内容media-queries涵盖了市场上可供选择的多种屏幕。此列表来自 2013 年（学分），可能并不详尽，但可以改进：

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

更新 2：

例如，以下子句处理--inch2017 年所有视网膜 MBP 的像素到映射。

@media (resolution: 192dpi) and (-webkit-device-pixel-ratio: 2) {
  :root {
    --inch: 130px;
  }
}

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

变量--inch意味着要测量的实际物理英寸。请注意，我们没有在媒体查询上使用 min/max 来适应此处的屏幕 dpi 范围。此映射仅适用于 MBP'17，返回的 dpi 为 192，dpr 为 2。

标签： cssmedia-queriesstandards

解决方案

显然，现在可以将 css 像素映射到真实的物理英寸。这很麻烦，但可能。为此，我们需要使用CSS 自定义属性，这些属性也称为 CSS 变量，如下所示：

/* 13.3-inch MBP (2012) (1280 x 800) */
@media (resolution: 96dpi) and (device-width: 1280px) {
  :root {
    --inch: 116px;
  }
}

/* 17" Retina MBP/Chrome values */
@media (resolution: 192dpi) and (device-width: 1680px) {
  :root {
    --inch: 130px;
  }
}

/* Windows 10 @100% (1366 x 768) landscape*/
@media (resolution: 96dpi) and (device-width: 1366px) {
  :root {
    --inch: 114px;
  }
}

/* Windows 10 Pro @100% (1920 x 1080px) landscape. */
@media (resolution: 96dpi) and (device-width: 1920px) {
  :root {
    --inch: 144px;
  }
}

/* Windows 10 Pro @125% (1920 x 1080px) landscape. */
@media (resolution: 120dpi) and (device-width: 1536px) {
  :root {
    --inch: 115px;
  }
}

/* 27" EIZO monitor (2560 x 1440)*/
@media (resolution: 115dpi) and (device-width: 2560px) {
  :root {
    --inch: 92px;
  }
}

/****************/
/* MOBILE ZONE */
/****************/

/* iPhone 11 Pro Max */

@media (device-width: 414px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
  :root {
    --inch: 370px;
  }
}

@media (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
  :root {
    --inch: 189px;
  }
}
/****************/
/* MOBILE ZONE */
/****************/

/* iPhone 11 Pro Max */

@media (device-width: 414px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
  :root {
    --inch: 370px;
  }
}

@media (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
  :root {
    --inch: 189px;
  }
}

/* …and so on. */

对于市场上可用的大多数主要设备或您希望支持的设备，您将需要特定于硬件的映射。也可以使用 dpi+device-width 组合的 min()/max() 范围在文档中声明一个--inchcss 变量，:root但这会引入稍高的误差范围。

一次，您拥有所有映射，只需var(--inch)在样式表上使用布局，您就可以了！

我已经把这个解决方案变成了一个开源的 polyfill ，涵盖了当时的主要设备。--inch:pixels如果您的设备/浏览器尚未包含在其中，请随意使用它并提交 PR 以添加新的映射。

推荐阅读