Question

我正在调整我的网页用于视网膜显示，我正在使用IrfanView来使我的图像加倍。但是，通常640 x 427 px的图像现在变为1281 x 855 px。这是否会按预期工作？.I我也在使用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('example_image@2x.png') no-repeat;
    background-size: 640px 427px; 
  }
}

（example_image@2x.png 1280px x 854px）

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

1 个答案: