css - iMac 5k 分辨率的媒体查询

Question

我试图在 iMac 5k 显示器上显示基于 Flexbox 的八列网格 (5120 × 2880) 但我无法理解我究竟使用了哪个媒体查询5K分辨率!

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

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

Answer 1

到目前为止，大多数答案似乎都忽略了设备像素和“CSS 像素”之间的差异，这取决于设备的像素密度。我没有 iMac 5K，但我相信它的屏幕深度是 2 倍，这意味着，尽管是 5K，它只会显示相当于 2560*1440 像素(虽然非常清晰，因为它的双密度)。参见 Designer's guide to DPI ，塞巴斯蒂安·加布里埃尔 (Sebastian Gabriel) 着，不仅解释了像素密度，还以一些 iMac 为例。

因此，从理论上讲，如果您想在全宽浏览器中定位 5K，您的媒体查询将类似于:

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

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

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

可能还值得补充的是，-webkit... 媒体查询选项针对的是浏览器，特别是基于 webkit 的浏览器(Safari，还有 Chrome 等)，而不是设备。如果您的目标确实是只针对 iMac 5K 用户，假设他们在 Safari 上浏览，您也可以尝试一些 hacky，例如:

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

来自 CSS3 Media Query to target only Internet Explorer (from IE6 to IE11+), Firefox, Chrome, Safari and/or Edge , 赖安 (Ryan)。

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

然而，黑客攻击也不是好的做法。正如 Browserhacks 在他们的免责声明中所说:

Please keep in mind using a hack is not always the perfect solution. It can be useful to fix some weird browser specific bug, but in most cases you should fix your CSS/JS or use feature detection.