5k桌面屏幕的媒体查询

Question

我正试图优化我的应用程序5K桌面屏幕(5120x2880)，如iMac (Retina 5K, 27-inch, 2017)。

我已经麻烦地实现了正确的媒体查询，这将允许我目标和修改这些元素。

目前，我最大的工作媒体查询是1080 p全高清电视，这是很好的工作。

1920年x 1080

@media only screen 
  and (min-width: 1824px) {

      #product-details-main {
        width: 32.4%;
        overflow: hidden;
        min-height: 600px;
        padding: 0 0 0 1%;
        position: absolute;
        right: 140px;
     }



}

以前也曾在here上问过类似的问题，但解决方案没有奏效。

任何方向盘都将不胜感激。

Answer 1

您可以在媒体查询中使用min-device-width而不仅仅是min-width，结合min-device-pixel-ratio，您应该能够处理大的高分辨率屏幕。

在评论后添加：

好吧，如果你瞄准的5k屏幕宽为5120 of，DPR为2，那么你应该使用这些值。这取决于设备(也就是说，对于4k屏幕也不起作用)