我在我的网站上做了一些工作，以比大屏幕显示更小的屏幕(以像素为单位)和另一个导航(更大)。 现在，当调整浏览器窗口大小时，这可以在我的桌面上运行，但当然也有与我的台式机具有相同像素数的手机，但屏幕非常小(假设为 5 英寸)。
所以我想做的是:不仅当你有很多像素时显示“桌面”CSS，而且当你的屏幕是 10 英寸或更大时也显示“桌面”CSS。 我可以通过媒体查询来实现这一点吗？
这就是我现在拥有的:
<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">
最佳答案
在媒体查询中使用分辨率来区分不同像素密度的设备。
例如，要使用 288 dpi 设备，其中一个逻辑像素是三个硬件像素，请使用其中之一
@media screen and (min-resolution: 3dppx) { ... }
@media screen and (min-resolution: 288dpi) { ... }
其中 dppx 表示每像素点数，当然 dpi 表示每英寸点数。
关于css - 用于检测小(以英寸为单位)但高宽度(以像素为单位)屏幕的媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21729308/