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。

Answer 2

将device-pixel-ratio和resolution添加到您的媒体查询中。为了最大化跨浏览器兼容性，您应该使用以下内容：

 @media (-webkit-min-device-pixel-ratio: 2),   /* Webkit-based browsers */
        (min--moz-device-pixel-ratio: 2),      /* Older Firefox browsers (prior to Firefox 16) */
        (min-resolution: 2dppx),               /* The standard way */
        (min-resolution: 192dpi) {             /* dppx fallback */  
         ...
      }

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

可在此处找到不同设备的像素比值：http://bjango.com/articles/min-device-pixel-ratio/

媒体查询以检测小（英寸）但高宽（以像素为单位）的屏幕

2 个答案: