5k桌面屏幕的媒体查询

Question

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

我正在麻烦实现正确的媒体查询，这将使我能够定位和修改其中的元素。

就目前而言，我最大的工作媒体查询是对效果很好的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屏幕无法使用相同的设备）