Question

不同的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和较高值不起作用。已经在为桌面分辨率工作而没有任何问题

Answer 1

@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){ 

}

Answer 2

尝试使用这个旧的编码系统

@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 */
  }
}

Answer 3

Horay ！！！我得到了答案。无需使用许多DPR。如果有人需要使用最大DPR值。例如，我的手机x使用DPR值3，Pixel 2 XL使用3.5。因此，我随后使用了DPR4。它在一个查询中完成所有操作。谢谢大家的答复。

@media（最小宽度：320像素）和（最大宽度：480像素）和（-webkit-max-device-pixel-ratio：4）{max-resolution：4dppx; }

在CSS媒体查询中，设备像素比率或DPR在不同的DPR屏幕上不起作用

3 个答案: