Question

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

从我所阅读的内容中，如果我理解它只是查询分辨率无法正常工作，一些高dpi智能手机的分辨率几乎与某些计算机相同。

1 - 但是从我发现的所有示例中，大多数人查询px并且不使用dpi进行查询，为什么会这样？

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

3 - 有办法做到这一点吗？

编辑：我不会以任何方式使用厘米，我会在几个dpi间隔使用某些px或％。我用cm来表示为什么我需要在dpi中查询。

Answer 1

在你的样式表中你可以这样做：

@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">

请记住，平板电脑通常都是hi-dpi。人们仍然使用@media all and (max-width: 320px)查询视口的原因是因为无论像素密度是多少，320像素仍然是320像素。它的大小相同。

由于您正在设计屏幕而不是打印，因此尝试使用像厘米这样的物理单位是一个坏主意。坚持像素和ems。