CSS：查询屏幕分辨率和密度的最佳方法？

对于我的网站，我想创建一些div，智能手机的尺寸约为1cmx1cm，平板电脑和电脑的尺寸约为1.5cmx1.5cm。 （我会选择几个dpi间隔的宽度和高度）

从我所读到的内容来看，如果我理解正确，仅仅查询分辨率是不可行的，一些高dpi智能手机的分辨率几乎与一些计算机相同

1-但是从我找到的所有示例来看，大多数人查询px而不是使用dpi查询，这是为什么

2-在高dpi计算机屏幕中，我们现在使用桌面显示缩放，那么如何知道浏览器何时缩放

3-有没有办法做到这一点

---

编辑：我不会以任何方式使用厘米，我会在几个dpi间隔使用某些px或%。我使用cm作为一种方式来说明我为什么需要在dpi中进行查询。

在样式表中，您可以执行以下操作：

@media all and (-webkit-min-device-pixel-ratio: 1.5) {

}

人们使用它来提供高分辨率图像，但它仍然在桌面显示器上被检测到

要确保移动设备以设备宽度呈现页面，需要添加视口元标记：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

记住，平板电脑通常是高dpi的。还有一个原因是，人们仍然使用，即

@media all和（最大宽度：320px）

查询视口，因为无论像素密度如何，320像素仍然是320px。它将是相同的大小

---

因为你是为屏幕而不是印刷设计的，所以尝试使用厘米这样的物理单位是个坏主意。坚持使用像素和ems。

可能的重复是我想设计一个按钮。即使px总是px，我也不希望智能手机上的按钮太小。然后我不希望它在平板电脑或电脑上太大。@JúlioCésarLuta就像我说的，320px在智能手机或低分辨率桌面显示器上是一样的。我已经做了按钮，我已经看到了结果。。。智能手机上的按钮太小，几乎无法使用，而低分辨率桌面显示器上的按钮更大。要么存在调整和缩放px的东西，而您认为我知道它，要么您不理解我的意思。@JúlioCésarLuta可能是视图端口的相对大小使它们看起来更小或更大。你用的是什么单位？我在iphone上试用时失败的第一次测试就在这里进行：我在这台电脑中使用了51像素（在我的1440P13英寸笔记本电脑上，显示缩放效果不错），ems也可以用于此目的？