视网膜2x图像的大小是否存在细微差异

Question

我正在调整我的网页以适应视网膜显示，我正在使用IrfanView将我的图像加倍。然而，一个通常是640 x 427 px的图像现在变成了1281 x 855 px。这会像预期的那样工作吗？。我也在用retina js。

Answer 1

如果你想为视网膜显示添加图像，你必须这样做：

对于正常屏幕：

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('[e-mail]') no-repeat;
    background-size: 640px 427px; 
  }
}

([e-mail]1280px x 854px）