5k 桌面屏幕的媒体查询

Question

我正在尝试针对 5K 桌面屏幕 (5120 x 2880) 优化我的应用程序，例如 iMac (Retina 5K, 27-inch, 2017)。

我很难实现正确的媒体查询，这将允许我定位和修改其中的元素。

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

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 像素宽并且 DPR 为 2，那么您应该使用这些值。这取决于设备（即同样不适用于 4k 屏幕）