jquery - 视网膜 2x 图像中的微小尺寸差异是否重要？

Question

我正在为视网膜显示器调整我的网页，我正在使用 IrfanView 来加倍我的图像。但是，通常 640 x 427 px 的图像现在变成了 1281 x 855 px。这会按预期工作吗？我也在使用 Retina js。

Answer 1

如果你想为 Retina 显示添加图像，你必须这样做:

对于普通屏幕:

background: url('example_image.png') no-repeat; (example_image.png 640px x 427px)

对于视网膜显示:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx){
  .your_element{
    background: url('example_image@2x.png') no-repeat;
    background-size: 640px 427px; 
  }
}

(example_image@2x.png 1280px x 854px)