css - 用于检测小(以英寸为单位)但高宽度(以像素为单位)屏幕的媒体查询

Question

我在我的网站上做了一些工作，以显示较小的屏幕(以像素为单位)与大屏幕相比，另一个导航(更大)。现在，当调整浏览器窗口大小时，这在我的桌面上有效，但当然也有手机具有与我的台式机相同的像素数，但屏幕非常小(比如 5 英寸)。

所以我想做的是:不仅在您有很多像素时显示“桌面”css，而且在您的屏幕为 10 英寸或更大时也显示。我可以用媒体查询来完成吗？

这是我现在拥有的:

<link rel="stylesheet" href="/styles/style-mobile.css" media="only screen and (max-width: 840px)" >
<link rel="stylesheet" href="/styles/style-desktop.css" media="screen and (min-width: 841px)">
<link rel="stylesheet" href="/styles/style-desktop.css" media="print">

Answer 1

在媒体查询中使用resolution 来区分不同像素密度的设备。

例如，要倾向于一个 288 dpi 设备，其中一个逻辑像素是三个硬件像素，请使用其中之一

@media screen and (min-resolution: 3dppx) { ... }
@media screen and (min-resolution: 288dpi) { ... }

其中 dppx 表示每像素点数，而 dpi 当然是每英寸点数。

参见 W3C或 MDN .