html - 5k 桌面屏幕的媒体查询

Question

我正在尝试针对 5K 桌面屏幕 (5120 x 2880) 优化我的应用程序，例如 iMac(Retina 5K，27 英寸，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 屏幕)