我试图在 iMac 5k 显示器上显示基于 Flexbox 的八列网格(5120 × 2880)，但我无法理解我仅用于哪个媒体查询5K 分辨率！
@media(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
我也只想要 5K 分辨率的效果，而且在 4k 显示分辨率下它的显示效果符合我的预期
【问题讨论】：
min-width?
标签： css flexbox media-queries
这只会将样式应用于 5120 像素或更宽的屏幕：
@media(min-width: 5120px){
// codez
}
【讨论】：
忽略任何填充、滚动条等，并假设这仅用于全屏显示，您将希望使用@media (min-width: 5120px)。您可以将 and 与您提供给更具体的目标设备（例如高 DPI）的查询结合使用。
5120px 的值可以（并且可能应该）降低，介于 4k 和 5k 显示器的截止值之间。这将允许用户稍微缩小浏览器，包括滚动条等等。
【讨论】：
试试这个：
因为 iMac 4k 的宽度是 4096 像素，而 iMac 5k 的宽度是 5120 像素。此媒体查询将在这些分辨率之间工作
@media only screen and (min-width : 4095px) and (max-width : 5120px) {
}
【讨论】：
我在一些项目中使用了这个媒体查询，它的作品非常适合我！
@media screen and (min-width: 2400px) {
height: 650px;
}
【讨论】：
到目前为止，大多数答案似乎都忽略了设备像素和“CSS 像素”之间的区别，这取决于设备的像素密度。我没有 iMac 5K，但我相信它的屏幕深度是 2 倍，这意味着，尽管是 5K，但它只能显示相当于 2560*1440 像素（虽然非常锐利，因为它的双倍密度）。请参阅 Sebastian Gabriel 的 Designer's guide to DPI，它不仅解释了像素密度，还展示了一些 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 */
}
}
您还可以在 browserhacks.com 找到其他黑客。
然而，黑客也不是好的做法。正如 Browserhacks 所说，在他们的免责声明中：
请记住，使用 hack 并不总是完美的解决方案。修复一些奇怪的浏览器特定错误可能很有用，但在大多数情况下，您应该修复 CSS/JS 或使用 feature detection。
【讨论】：