在 css 媒体查询中，设备像素比或 DPR 不适用于不同的 DPR 屏幕答案

【问题标题】：In css media queries, Device Pixel Ratio or DPR is not working for different DPR screens在 css 媒体查询中，设备像素比或 DPR 不适用于不同的 DPR 屏幕
【发布时间】：2019-10-28 09:46:42
【问题描述】：

不同的 DPR 无法处理媒体查询

尝试了不同的 DPR。但不工作

@media (min-width: 320px) and (max-width: 480px) and (-webkit-max-device-pixel-ratio: 1.6) {
max-resolution: 1.6dppx;
}

@media (min-width: 320px) and (max-width: 480px) and (-webkit-max-device-pixel-ratio: 2) {
max-resolution: 2dppx;
}

@media (min-width: 320px) and (max-width: 480px) and (-webkit-max-device-pixel-ratio: 3) {
max-resolution: 3dppx;
}

DPR 1 到 1.5 工作正常。但在 iphone X、iphone 6/7/8 plus 中使用的 DPR 2 和更高值不起作用。已经为桌面分辨率工作，没有任何问题

【问题讨论】：

iPhone X / 8 / 8 Plus CSS media queries的可能重复

标签： css

【解决方案1】：

万岁！！！我得到了答案。无需使用许多 DPR。如果有人需要这样做，请使用最大 DPR 值。例如，i phone x 使用 DPR 值 3，Pixel 2 XL 使用 3.5。然后我使用了 DPR 4。它在一个查询中完成所有事情。谢谢大家的回复。

@media (min-width: 320px) and (max-width: 480px) and (-webkit-max-device-pixel-ratio: 4) { max-resolution: 4dppx; }

【讨论】：

【解决方案2】：

@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 

    }

/* 1.3 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 124.8dpi){ 

}

/* 1.5 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 

}

【讨论】：

【解决方案3】：

试试这个旧的编码系统

@media only screen and (min-width: 768px) {
  /* non-retina */
  .image1 {
    background-image: url("image1.jpg");
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 768px),
  only screen and (min--moz-device-pixel-ratio: 2) and (min-width: 768px),
  only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 768px),
  only screen and (min-device-pixel-ratio: 2) and (min-width: 768px),
  only screen and (min-resolution: 2dppx) {
  /* retina display. dpr 2 */
  .image1 {
    background-image: url("image1@2x.jpg");
    background-size: 250px 400px;
    /* same size as normal image would be or on web it will scale up 2 times */
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 3) and (min-width: 768px),
  only screen and (min--moz-device-pixel-ratio: 3) and (min-width: 768px),
  only screen and (-o-min-device-pixel-ratio: 3/1) and (min-width: 768px),
  only screen and (min-device-pixel-ratio: 3) and (min-width: 768px),
  only screen and (min-resolution: 3dppx) {
  /* dpr 3 */
  .image1 {
    background-image: url("image1@3x.jpg");
    background-size: 250px 400px;
    /* same size as normal image would be or on web it will scale up 3 times */
  }
}

【讨论】：