Question

我正在尝试在iMac 5k显示器上显示基于八列网格的 Flexbox （5120×2880），但我无法理解我仅用于哪种媒体查询5K分辨率！

RactiveDict

我还希望仅5K分辨率会起作用，而且以4k显示分辨率显示其预期效果

Answer 1

到目前为止，大多数答案似乎都忽略了设备像素和“ CSS像素”之间的差异，这取决于设备的像素密度。我没有iMac 5K，但我相信它的屏幕深度是2倍，这意味着，尽管它是5K，但它只能显示相当于2560 * 1440px的像素（尽管非常锐利，原因是它的两倍密度）。参见塞巴斯蒂安·加布里埃尔（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上浏览），那么您也可以尝试使用类似的技巧：

@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所说，免责声明：

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

Answer 2

不考虑任何填充，滚动条等，并假设对于全屏显示来说这仅是，您将要使用@media (min-width: 5120px)。您可以将and与您针对特定设备（例如，高DPI）提供的查询结合起来。

5120px值可以降低（可能应该降低），介于4k和5k显示的截止值之间。这将允许用户略微缩小浏览器，包括滚动条等等。

Answer 3

这只会将样式应用于5120像素或更宽的屏幕：

@media(min-width: 5120px){
  // codez
}

Answer 4

尝试一下：

由于iMac 4k宽度为4096px，iMac 5k宽度为5120px。此媒体查询将在这些分辨率之间起作用

@media only screen and (min-width : 4095px) and (max-width : 5120px) {

}

Answer 5

我的某些项目中使用了此媒体查询，它对我来说很完美！

@media screen and (min-width: 2400px) {
    height: 650px;
}

iMac 5k分辨率的媒体查询

5 个答案: