iMac 5k 分辨率的媒体查询

Question

我试图在 iMac 5k 显示器(5120 \xc3\x97 2880)上显示基于八列网格的Flexbox，但我无法理解我仅用于 5K 分辨率的媒体查询！

\n\n

@media(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { \n/* Retina-specific stuff here */\n}\n

\n\n

我也希望只有 5K 分辨率才会有效果，而且在 4k 显示分辨率下它的显示符合我的预期

\n

Answer 1

到目前为止，大多数答案似乎忽略了设备像素和“CSS 像素”之间的差异，它们取决于设备的像素密度。我没有 iMac 5K，但我相信它的屏幕深度是 2 倍，这意味着，尽管是 5K，它只能显示相当于 2560*1440px 的分辨率（尽管非常清晰，因为它的双倍密度）。请参阅Sebastian Gabriel 撰写的DPI 设计师指南，其中不仅解释了像素密度，还展示了一些 iMac 作为示例。

因此，理论上，如果您想使用全宽浏览器定位 5K，您的媒体查询将类似于：

@media screen and (min-width:2560px) { 
    /* CSS rules here */
}

...或者，可能略小于 2560，以尝试捕获用户没有让浏览器占据屏幕整个宽度的情况。

然而，事实是，这不是构建媒体查询的方式。通常，目标设备并不重要，重要的是确保您的内容无论在哪个平台上都能良好显示并适应不同的宽度。以您的 iMac 5K 用户为例。也许他们不会使用浏览器填充屏幕的整个宽度，而是只填充屏幕的一半，这样他们就可以在另一半上处理其他事情。也许他们会放大或缩小页面，这也会影响将应用的媒体查询。您需要担心的是您的网格是否能很好地适应所有这些可能性，而不是正在使用的设备。

还值得补充的是，-webkit...媒体查询选项针对的是浏览器，特别是基于 webkit 的浏览器（Safari 以及 Chrome 和其他浏览器），而不是设备。如果你的目标确实是只针对 iMac 5K 用户，假设他们在 Safari 上浏览，你也可以尝试一些像下面这样的 hack：

@media not all and (min-resolution:.001dpcm) { 
    @media {
        /* CSS rules here */
    }
}

从CSS3 媒体查询到仅针对 Internet Explorer（从 IE6 到 IE11+）、Firefox、Chrome、Safari 和/或 Edge，作者：Ryan。

您还可以在browserhacks.com上找到其他技巧。

然而，黑客行为也不是好的做法。正如 Browserhacks 在其免责声明中所说：

请记住，使用 hack 并不总是完美的解决方案。修复一些奇怪的浏览器特定错误可能很有用，但在大多数情况下，您应该修复 CSS/JS 或使用功能检测。